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

【问题标题】：Can't resolve module (not found) in React.js无法解析 React.js 中的模块（未找到）
【发布时间】：2017-11-10 08:59:13
【问题描述】：

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

控制台说它在目录中找不到模块，但我已经检查了至少 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 test 说了同样的话。

【问题讨论】：

在“头文件”中添加export default Header;
还是不行。
看来你需要import Header from './components/header/header' w/o src。文件路径是相对于导入文件路径的。然后你需要从header.js导出Header并修复App.render方法。
如果我从src文件夹中取出components文件夹，那么它告诉我需要修改node_modules文件，这不是我的注意。
你不需要移动任何东西。您的相对路径不正确。如果您在 './src/app.js' 中导入，它应该是 import smth from './components/header/header' 这一行相同 import navBar from './src/components/header/navBar' 它应该相对于当前路径 import navBar from './navBar'

标签： javascript reactjs

【解决方案1】：

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

. 和.. 类似于我们在terminal 中导航的方式，例如cd .. 离开目录和mv ~/file . 将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 中。对于import，你会做import Header from './components/header'。这大致翻译为在我当前的目录中，找到包含头文件的组件文件夹。

现在，如果来自header.js，你需要来自import 的东西来自card，你会这样做。 import Card from '../containers/card'。这转化为，移出我当前的目录，查找具有卡片文件的文件夹名称容器。

对于import React, { Component } from 'react'，它不是以./ 或../ 或/ 开头的，因此节点将开始以特定顺序在node_modules 中查找模块，直到找到react。更详细的了解可以阅读here。

【讨论】：

【解决方案2】：

如果你使用 react-create-app 创建应用，别忘了设置环境变量：

NODE_PATH=./src

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

【讨论】：

这是为我解决的问题。我在src/ 中添加了一个简单的App.css 并做了import App.css。但这给了我问题的错误。这个答案解决了这个问题。
我以为我疯了，我的 React 应用程序没有按预期工作，我只是粘贴了这个环境变量，它就可以工作了......问题是为什么它还没有附带这个文件。 ..我不明白，如果 react 花了 12 分钟下载一堆依赖项，为什么它不附带这些文件。

【解决方案3】：

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

npm install

Read further

【讨论】：

非常感谢，我遇到了以下错误：找不到模块：无法解析... TextInput 和您的解决方案解决了它

【解决方案4】：

在.env 中添加NODE_PATH 作为环境变量已被弃用，取而代之的是在jsconfig.json 或tsconfig.json 中将"baseUrl": "./src" 添加到compilerOptions。

Reference

【讨论】：

【解决方案5】：

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

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

虽然一切都在正确的目录中。

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

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

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

然后构建错误消失了！

【讨论】：

【解决方案6】：

我认为它是标题的双重用途。我自己也试过类似的东西，也引起了问题。我将我的组件文件大写以匹配其他文件并且它有效。

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

应该是

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

【讨论】：

我讨厌这给了我答案，因为我有相同的文件夹结构，而不是 ./components/header/header 我在做 ./components/header ...我太老了，不适合那些有点错误 lolol

【解决方案7】：

我也有类似的问题。

原因：

import HomeComponent from "components/HomeComponent";

解决方案：

import HomeComponent from "./components/HomeComponent";

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

【讨论】：

【解决方案8】：

有一种更好的方法可以处理 React 应用程序中模块的导入。考虑这样做：

将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'

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

您应该将 import Header 从 './src/components/header/header' 更改为

从'../src/components/header/header'导入标题

【讨论】：

【解决方案11】：

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

【讨论】：

特别是如果该软件包以前是由另一个用户安装的。即：检查文件/文件夹的访问权限

【解决方案12】：

您需要在项目文件夹中，如果您在 src 或 public 中，则必须从这些文件夹中出来。假设你的 react-project 名称是 'hello-react' 然后 cd hello-react

【讨论】：

【解决方案13】：

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

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

然后你应该可以使用./components/header/header（在这种情况下）导入

【讨论】：

【解决方案14】：

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

【讨论】：

【解决方案15】：

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

【讨论】：

【解决方案16】：

检查导入语句。它应该以分号结尾。如果你错过任何一个，你会得到这个错误。

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

从“worker_threads”导入 { threadId }；

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

【讨论】：

【解决方案17】：

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

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

所以我删除了：./node_modules/

import React, { Component } from "react";

干杯！

【讨论】：

【解决方案18】：

我想这对你有帮助-

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

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

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

【讨论】：

感谢您的建议！