我刚开始使用React.js,但是无法导入组件。
我具有本教程(YouTube链接)所遵循的结构:
-- src ----| index.html ----| app ------| index.js ------| components --------| MyCompontent.js
这是我的index.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:
MyComponent.js
import React from "react"; export class MyCompontent extends React.Component { render(){ return( <div>MyCompontent</div> ); } }
我正在使用此webpack文件(GitHub链接)。
但是,当我运行它时,我的模块无法加载。
我在浏览器控制台中收到此错误:
错误:找不到模块“ ./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
无法弄清楚这里出了什么问题。
您的输入中有错字。您正在要求MyCompontent。改成:
MyCompontent
import MyComponent from "./components/MyComponent";
还有所有错别字。