Javascript Can'；t在React.js中解析模块（未找到）

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

控制台说它在目录中找不到模块，但我至少检查了10次输入错误。无论如何，这是组件代码

我想在根目录中渲染标题

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;

我已经检查了至少10次模块是否在这个位置

/src/components/header/header

，并且它是（文件夹“header”包含“header.js”）

但是，React仍然会抛出以下错误：

未能编译

/src/App.js
未找到模块：无法解析“/home/wiseman/Desktop/React\u components/github portfolio/src”中的“/src/components/header/header”

npm测试也说明了同样的问题
 我们通常使用的导入方式是基于相对路径的

和
。
类似于我们在
终端中导航的方式，如
cd..
走出目录和
mv~/file.
将
文件移动到当前目录

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

在您的例子中，
App.js
位于
src/
目录中，
header.js
位于
src/components
目录中。要
导入
，您需要执行
从“/components/Header”导入标题
。这将大致转换为在我的当前目录中，查找包含头文件的components文件夹

现在，如果从
header.js
，您需要从
card
导入
内容，您可以这样做<代码>从“../containers/Card”导入卡片
。这将转换为，移出我的当前目录，查找包含卡片文件的文件夹名容器

对于
import React，{Component}从'React'
开始，它不是以
/
或
开始的。/
或
/
因此节点将开始按特定顺序在
节点中查找模块，直到找到
React
。要了解更多详细信息，请阅读。
如果使用react create app创建应用程序，请不要忘记设置环境变量：

NODE_PATH=./src

或者将
.env
文件添加到根文件夹中
 您需要在项目文件夹中，如果您在
src
或
public
中，您必须从这些文件夹中出来。假设您的react项目名为“hello react”，那么我遇到了类似的问题

原因：

import HomeComponent from "components/HomeComponent";

解决方案：

import HomeComponent from "./components/HomeComponent";

注意：
/
在组件之前。您可以阅读上面@Zac Kwan关于如何使用
import
检查import语句的帖子。它应该以分号结尾。如果您遗漏了任何错误，您将得到此错误

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

从“worker_threads”导入{threadId}

如果是这样，请删除该行。它适合我。
您应该将导入标题从“/src/components/Header/Header”更改为

从“导入标题。/src/components/Header/Header”
您可以尝试在应用程序文件夹中执行“npm安装”。这也可能解决问题。这对我很有用。
我想这是头的双重用途。我自己也尝试过类似的方法，也引起了一些问题。我将我的组件文件大写，以便与其他文件匹配，结果成功了

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

应该是

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

在我的例子中，我重命名了一个组件文件，VS代码为我添加以下代码行：

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

因此，我通过删除：
/node\u模块/

import React, { Component } from "react";

干杯
 在
中添加
NODE\u PATH
作为环境变量，env
已被弃用，取而代之的是在
jsconfig.json
或
tsconfig.json
中的
编译器选项中添加
baseUrl:“/src”

我在创建一个新的react应用程序时遇到了同样的问题，我尝试了中的所有选项，但都没有用。我不得不更改新应用程序的端口，然后它就工作了。默认情况下，应用程序使用端口3000。我在package.json中将端口更改为8001，如下所示：

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

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

npm install

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

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

然后，您可以使用
/components/header/header
（在本例中）导入
在我的例子中，错误消息是

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

当一切都在正确的目录中时

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

我发现将
body.jsx
重命名为
body.js
可以解决这个问题

因此，我在
webpack.config.js
中添加了此代码，以将
jsx
解析为
js

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

然后构建错误消失了
 有一种更好的方法可以处理React应用程序中模块的导入。
考虑这样做：

将
jsconfig.json
文件添加到基本文件夹。这与包含package.json的文件夹相同。接下来，在其中定义基本URL导入：

现在，您不必调用
。/../
，而可以轻松地执行以下操作：

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

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

这样比较整洁

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

import logo from './logo.svg'

对我来说，我的输入是正确的，但npm start可能有缺陷（至少在Windows和Linux上的Hyper-terminal上使用它）。如果我将文件移动到不同的文件夹中，npm start不会接收这些更改。我需要取消npm启动过程，进行移动，保存，然后运行
npm启动
，它现在会看到文件。
我想它可能会对您有所帮助-

阅读
import logo from './logo.svg'