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

我刚刚开始使用React.js，无法导入组件。React无法导入组件 - 找不到模块

我有这样的结构，其次是this tutorial (YouTube link)：

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

这是我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'));

这是MyComponent.js：

import React from "react"; 

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

我使用this webpack file (GitHub link)。

但是，当我运行这个，我的模块无法加载。

我得到这个错误在浏览器控制台：

Error: Cannot find module "./components/MyCompontent"

[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

想不通了什么错在这里。

来源

2016-12-25 Kunok

您的导入中有错字。您要求MyCompontent。更改为：

import MyComponent from "./components/MyComponent";

还有所有错别字。

来源

2016-12-25 16:50:05

还是有同样的错误; '错误：无法找到模块“./components/MyCompontent”' – Kunok

你有一个错字，可能是相关的：'MyCompontent'而不是'MyComponent' –

是的，这是一个错字。对不起。 – Kunok

你可以尝试从 “./components/MyCompontent.js”

这样

import MyCompontent from "./components/MyCompontent.js";

来源

2016-12-25 16:53:18 Rainmx93

你写了一个文件名是MyComponent.js导入MyCompontent。

因此，您的导入应该像

import { MyCompontent } from './components/MyComponent.js'

来源

2016-12-25 17:15:36

对于任何人来到这里没有一个错字，并正在使用的WebPack，一定要检查是否有这样的条款：

resolve: { 
    extensions: [".jsx", ".js"] 
},

在您的webpack.config.js。

这告诉你transpiler来解决类似的语句：

import Setup from './components/Setup'

到

import Setup from './components/Setup.jsx'

这样，你不需要扩展。

来源

2017-06-14 19:52:22

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

回答

相关问题