无法解析React.js中的模块（未找到）

我不敢相信我在问一个明显的问题，但在控制台日志中仍然出现错误。

控制台表示无法在目录中找到该模块，但是我至少检查了10次错别字。无论如何，这是组件代码。

我想在根中渲染Header

import React, { Component } from 'react'
import Header from './src/components/header/header'
import logo from './logo.svg'
import './App.css'

class App extends Component {
  render() {
    return (
      <Header/>
    );
  }
}

export default App;

这是Header组件

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import navBar from './src/components/header/navBar'
import './src/css/header.css'

class Header extends Component {
    render() {
        return {
            <div>
             <div id="particles-js"></div>
             <navBar/>
             <Title/>
          </div>
        };
    }
}

ReactDOM.render(<Header/>, document.getElementById('header'));

我至少检查了10次该模块是否在此位置./src/components/header/header，并且它是（文件夹“ header”包含“ header.js”）。

然而，React仍然抛出此错误：

编译失败

./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

NPM测试说的是同样的话。

我们通常使用的import方式基于相对路径。

.并且..类似于我们用于导航的方法，terminal例如cd ..离开目录并将mv ~/file .afile移至当前目录。

my-app/
  node_modules/
  package.json
  src/
    containers/card.js
    components/header.js
    App.js
    index.js

您的情况App.js是，在src/目录中，而header.js在中src/components。要import你做import Header from './components/header'。这大致翻译成我的当前目录，找到包含头文件的components文件夹。

现在，如果来自header.js，则需要来自的import东西card，则可以执行此操作。import Card from '../containers/card'。这意味着，移出当前目录，查找具有卡文件的文件夹名称容器。

至于import React, { Component } from 'react'，这不符合启动./或../或/因此节点将开始寻找在该模块node_modules，直到以特定的顺序react被发现。要了解更多详细信息，请在此处阅读。

如果您使用react-create-app创建应用程序，请不要忘记设置环境变量：

NODE_PATH=./src

或将.env文件添加到您的根文件夹；

不赞成将NODE_PATHin作为环境变量.env添加"baseUrl": "./src"到compilerOptionsinjsconfig.json或中，而由in代替tsconfig.json。

参考

删除package-lock.json文件，然后运行

npm install

进一步阅读

就我而言，错误消息是

Module not found: Error: Can't resolve '/components/body

一切都在正确的目录中。

我发现重命名body.jsx可以body.js解决问题！

所以我在加入这个代码webpack.config.js来解决jsx如js

 module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

然后构建错误消失了！

我认为它是标题的双重用途。我自己尝试过类似的操作，但也引起了问题。我将组件文件大写以使其与其他文件匹配，并且它起作用了。

import Header from './src/components/header/header';

应该

import Header from './src/components/header/Header';

我有一个类似的问题。

原因：

import HomeComponent from "components/HomeComponent";

解：

import HomeComponent from "./components/HomeComponent";

注意： ./在组件之前。您可以在上方阅读@Zac Kwan的帖子，了解如何使用import

当我创建一个新的react应用程序时，我遇到了相同的问题，我尝试了https://github.com/facebook/create-react-app/issues/2534中的所有选项， 但没有帮助。我必须更改新应用程序的端口，然后它才能工作。默认情况下，应用程序使用端口3000.我将package.json中的端口更改为8001，如下所示：

  "scripts": {
    "start": "PORT=8001 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

如果您位于项目文件夹中，则必须位于其中，src否则public必须从这些文件夹中取出。假设您的react-project名称为'hello-react'，则cd hello-react

您应该将导入标头从更改为。/ src / components / header / header'到

从“ .. / src / components / header / header”导入标题

您可以尝试在app文件夹中执行“ npm install”。这也可能解决问题。它为我工作。

我遇到了同样的问题，我解决了。查看index.js文件是否在src文件夹中，然后查看要导入的文件，包含该文件的文件夹也必须位于src文件夹中。

这意味着，如果您的components文件夹位于该src文件夹之外，则只需将其拖动到src编辑器中的文件夹内即可，因为src不会导入该文件夹之外的文件。

然后，您将能够使用./components/header/header（在这种情况下） 导入

有更好的方法可以处理React App中模块的导入。考虑这样做：

将jsconfig.json文件添加到您的基本文件夹。那是包含package.json的文件夹。接下来在其中定义您的基本URL导入：

//jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

现在，../../您可以轻松地执行以下操作，而不是致电：

import navBar from 'components/header/navBar'
import 'css/header.css'

请注意，“ components /”与“ ../components/”不同

这样更整洁。

但是，如果要在同一目录中导入文件，也可以执行以下操作：

import logo from './logo.svg'

检查导入语句，应以分号结尾。如果您错过任何一个，都会收到此错误。

还要检查是否在组件中添加了以下导入语句。

从'worker_threads'导入{threadId};

如果是这样，请删除该行。这个对我有用。

在我的情况下，我重命名了一个组件文件，一个VS Code为我添加以下代码行：

import React, { Component } from "./node_modules/react";

因此，我通过删除以下内容进行了修复： ./node_modules/

import React, { Component } from "react";

干杯!