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

Question

我无法相信我提出了一个明显的问题，但我仍然在控制台日志中收到错误。

控制台说它无法在目录中找到该模块，但我已经检查了至少10倍的错字。无论如何，这是组件代码。

我想在root

中渲染标题

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}的10倍，它是（文件夹＆＃34;标题＆＃34;包含＆＃34; header.js＆＃34; ）。

然而，React仍然抛出这个错误：

无法编译

./src/components/header/header

npm test 说同样的话。

Answer 1

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

.和..类似于我们如何使用terminal cd ..导航离开目录，mv ~/file .移动file 1}}到当前目录。

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' header.js。这大致转换为我当前的目录，找到包含头文件的components文件夹。

现在，如果从import开始，您需要card来自import Card from '../containers/card'的内容，您就可以执行此操作。 import React, { Component } from 'react'。这将转换为，移出当前目录，查找具有卡片文件的文件夹名称容器。

至于./，这不是从../或/或node_modules开始的，因此节点将开始在react中查找模块找到{{1}}之前的特定订单。有关更详细的理解，可以阅读here。

Answer 2

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

NODE_PATH=./src

或者在根文件夹中添加.env文件;

Answer 3

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

npm install

Read further

Answer 4

在我的情况下，错误消息是

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

所有内容均位于正确的目录中。

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

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

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

然后构建错误消失了！

Answer 5

有更好的方法可以处理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'

Answer 6

当我创建一个新的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"
  },

Answer 7

将 Header.js 中的 ReactDOM.render(<Header/>, document.getElementById('header')); 替换为 export default Header

Answer 8

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

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

然后，您将可以使用./components/header/header进行导入（在这种情况下）

Answer 9

不建议在return view('Myview.edit')->with('Task', $Edit); 或NODE_PATH中将.env作为环境变量添加到"baseUrl": "./src"中，并替换为compilerOptions。

Reference

Answer 10

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

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

应该是

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

Answer 11

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

Answer 12

您应该将导入标题从“ 。 / src / components / header / header”更改为

从' .. / src / components / header / header'

导入标题

Answer 13

我有一个类似的问题。

原因：

import HomeComponent from "components/HomeComponent";

解决方案：

import HomeComponent from "./components/HomeComponent";

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

Answer 14

您需要位于项目文件夹中，如果您在src或公共目录中，则必须走出这些文件夹，假设您的react-project名称是hello-react然后是cd hello-react

Answer 15

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

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

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

import React, { Component } from "react";

干杯！

Answer 16

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

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

从“ worker_threads”导入{threadId};

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

Answer 17

对我来说，我的输入正确，但是npm start可能有问题（至少与Windows和Linux上的Hyper终端一起使用）。如果我将文件移动到其他文件夹，则npm start不会进行这些更改。我需要取消npm启动过程，进行移动，保存，然后运行npm start，它将立即看到文件。

Answer 18

我认为它可以帮助您-

仔细阅读你的错误-./src/App.js 找不到模块：无法解析“/home/wiseman/Desktop/React_Components/github-portfolio/src”中的“./src/components/header/header”

在 App.js 中只写 - ./header/header 而不是 ./src/components/header/header

如果它不起作用尝试更改头文件名可能是头