react无法导入组件 - 找不到module

IT技术 javascript reactjs webpack
2021-04-27 08:42:00

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

我的结构如下本教程（YouTube链接）：

-- 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>
    );
  }
}

我正在使用这个 webpack 文件（GitHub 链接）。

但是，当我运行它时，我的module无法加载。

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

错误：找不到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

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

4个回答

对于任何没有打错字并且正在使用 Webpack 的人，请务必检查如下子句：

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

在你的webpack.config.js 中。

这会告诉您的转译器解析如下语句：

import Setup from './components/Setup'

到

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

这样你就不需要扩展了。

你的导入有错别字。你要求MyCompontent. 改成：

import MyComponent from "./components/MyComponent";

还有所有错别字。

您可以尝试从“./components/MyCompontent.js”导入 MyCompontent

像这样

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

我的问题是导入行未正确生成。我有这个场景：

--src
----elements
-----myCustomText.tsx

这是 myCustomText.tsx 文件：

export interface Props {
  text: string;
}

const MyCustomText = ({ text }: Props) => (
  <Text>{text}</Text>
);

export default MyCustomText

生成的导入是这样的：

import MyCustomText from '../../elements/MyCustomText';

我把它改成这样：

import MyCustomText from '../../elements/myCustomText'

不知道为什么生成的导入行自动生成错了。

其它你可能感兴趣的问题
上一篇使用带有 SLA 打印部件的热定型插件 下一篇如何在类组件中使用 next.js 中的“useRouter()”？