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

Question

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

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

我想在 root 中渲染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 测试说同样的事情。

Answer 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 ，你需要从card import一些东西，你会这样做。 import Card from '../containers/card' 。 这转换为，移出我的当前目录，查找具有卡文件的文件夹名称容器。

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

Answer 2

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

NODE_PATH=./src

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

Answer 3

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

npm install

进一步阅读

Answer 4

加入NODE_PATH如环境变量中.env已被弃用，通过加入取代"baseUrl": "./src" ，以compilerOptions在jsconfig.json或tsconfig.json 。

参考

Answer 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']
  }
};

然后构建错误消失了！

Answer 6

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

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

应该是

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

Answer 7

我有一个类似的问题。

原因：

import HomeComponent from "components/HomeComponent";

解决方法：

import HomeComponent from "./components/HomeComponent";

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

Answer 8

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

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

Answer 10

我通过放置文件扩展名解决了

import MyComponent from "src/components/MyComponent";

至

import MyComponent from "src/components/MyComponent.tsx";

Answer 11

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

Answer 12

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

Answer 13

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

进口头从“.. / SRC /组件/报头/报头”

Answer 14

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

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

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

Answer 15

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

Answer 16

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

Answer 17

我刚刚遇到了自动导入组件的问题，没有类型或 webpack 配置问题。

修复它的原因是将导入从相对于应用程序根目录更改为相对于文件：

import MyComponent from "src/components/MyComponent";

至

import MyComponent from "../components/MyComponent";

如果您通过最短路径从 Visual Studio Code 自动导入中获得此信息，则可以更改它，使其相对导入 . 通过去这里：

菜单文件→首选项→设置→用户设置，

"typescript.preferences.importModuleSpecifier": "relative"

Answer 18

如果您使用的是 create-react-app，并且刚刚添加了 typescript，请检查是否为您自动生成了tsconfig.json 。 CRA 文档说它应该是，但目前似乎有一个错误，它没有被生成。

如果缺少tsconfig.json ，有几种方法可以自己创建。

• 从互联网上或从另一个仓库复制一个
• npx tsc --init
• 使用npx create-react-app my-ts-proj --template typescript在其他地方创建一个新项目，然后从那里复制 tsconfig

Answer 19

它只对我有用 (./) 这里不需要 src

从“./components/header/header”导入 Header

Answer 20

您可能在 .js 文件中导入 .tsx 文件。 如果您正在处理 javascript 源，请确保您有 extensions.js 或 .jsx 而不是 .tsx:)

Answer 21

检查导入语句。它应该以分号结束。 如果您错过任何一个，您将收到此错误。

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

从'worker_threads'导入{threadId}；

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

Answer 22

就我而言，我重命名了一个组件文件，VS Code 为我添加了以下代码行：

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

所以我通过删除： ./node_modules/

import React, { Component } from "react";

干杯！

Answer 23

我想它可以帮助你-

仔细阅读你的错误 - ./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

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

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