反应无法导入组件

关注

发信

关注(28)粉丝(399)

反应无法导入组件 - 找不到模块

本文介绍了反应无法导入组件 - 找不到模块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚开始使用 React.js，但无法导入组件.

我的结构如下本教程(YouTube链接)) :

-- 源代码----|索引.html----|应用程序------|索引.js------|成分--------|我的组件.js

这是我的index.js:

从'react'导入React；从'react-dom'导入{渲染}；import { MyCompontent } from "./components/MyCompontent";类 App 扩展了 React.Component {使成为() {返回 (<div><h1>Foo</h1><我的组件/>

);}}render(<App/>, window.document.getElementById('app'));

这是MyComponent.js:

从react"导入React；导出类 MyCompontent 扩展 React.Component {使成为(){返回(<div>MyCompontent</div>);}}

我正在使用这个 webpack 文件 (GitHub链接).

但是，当我运行它时，我的模块无法加载.

我在浏览器控制台中收到此错误:

错误:找不到模块./components/MyCompontent"

[WDS] 热模块更换已启用.bundle.js:631:11[WDS] 编译时出错.bundle.js:631:11./src/app/index.js找不到模块:错误:无法解析/home/kuno/code/react-hoteli/src/app 中的文件"或目录"./components/MyCompontent解析文件/home/kuno/code/react-hoteli/src/app/components/MyCompontent 不存在/home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js 不存在/home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js 不存在/home/kuno/code/react-hoteli/src/app/components/MyCompontent.js 不存在/home/kuno/code/react-hoteli/src/app/components/MyCompontent.json 不存在解析目录/home/kuno/code/react-hoteli/src/app/components/MyCompontent/package.json 不存在(目录描述文件)/home/kuno/code/react-hoteli/src/app/components/MyCompontent 不存在(目录默认文件)[/home/kuno/code/react-hoteli/src/app/components/MyCompontent][/home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js][/home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js][/home/kuno/code/react-hoteli/src/app/components/MyCompontent.js][/home/kuno/code/react-hoteli/src/app/components/MyCompontent.json]@ ./src/app/index.js 11:20-56 bundle.js:669:5

无法弄清楚这里出了什么问题.

解决方案

您的导入有错别字.您正在请求 MyCompontent.更改为:

从./components/MyComponent"导入MyComponent；

还有所有错别字.

I just started with React.js and I am unable to import component.

I have this structure as followed by this tutorial (YouTube link) :

-- src
----| index.html
----| app
------| index.js
------| components
--------| MyCompontent.js

This is my index.js:

import React from 'react';
import { render } from 'react-dom';

import { MyCompontent } from "./components/MyCompontent";

class App extends React.Component {
    render() {
        return (
            <div>
              <h1>Foo</h1>
              <MyCompontent/>
            </div>
        );
    }
}

render(<App />, window.document.getElementById('app'));

This is MyComponent.js:

import React from "react";

export class MyCompontent extends React.Component {
  render(){
    return(
      <div>MyCompontent</div>
    );
  }
}

I am using this webpack file (GitHub link).

However, when I run this, my module fails to load.

I get this error in the browser console:

[WDS] Hot Module Replacement enabled.  bundle.js:631:11
[WDS] Errors while compiling.  bundle.js:631:11
./src/app/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./components/MyCompontent in /home/kuno/code/react-hoteli/src/app
resolve file
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js doesn't exist
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js doesn't exist
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent.js doesn't exist
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent.json doesn't exist
resolve directory
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent/package.json doesn't exist (directory description file)
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist (directory default file)
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.json]
 @ ./src/app/index.js 11:20-56  bundle.js:669:5

Can't figure out what went wrong here.

解决方案

You have a typo in your import. You're requesting MyCompontent. Change to:

import MyComponent from "./components/MyComponent";

And all typos as well.

这篇关于反应无法导入组件 - 找不到模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-18 12:27