无法解析 React.js 中的模块(未找到)

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

Console 说它找不到目录中的模块，但是我已经检查了至少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次模块位于 ./src/components/header/header的这个位置，确实如此(文件夹“ header”包含“ header.js”)。

然而，React 仍然抛出了这个错误:

编译失败

./src/App.js 未找到模块: 无法在“/home/wiseman/Desktop/React _ Component/github-folio/src”

中解析“ ./src/Component/header/header”

Npm 测试 说的是同样的事情。

688740 次浏览
小开
最佳答案

我们通常使用 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被发现。为了更详细的了解，它可以读取 给你。

小开

如果你使用 response-create-app 创建一个应用程序，别忘了设置环境变量:

NODE_PATH=./src

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

小开

你需要在项目文件夹，如果你是在 src或 public你必须走出这些文件夹。假设您的 response-project 名称是‘ hello-response’，然后是 cd hello-react

小开

我也有过类似的问题。

原因:

import HomeComponent from "components/HomeComponent";

解决方案:

import HomeComponent from "./components/HomeComponent";

注意: ./是在组件之前。你可以阅读@Zac Kwan 上面关于如何使用 import的文章

小开

检查 import 语句。它应该以分号结束。如果漏掉了任何一个，就会得到这个错误。

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

从“ worker _ thread”导入{ threadId } ;

如果是这样的话，删除这条线。它为我工作。

小开

您应该将 import Header 从‘ ./src/Component/Header/Header’更改为

从‘ ../src/Component/Header/Header’导入 Header

小开

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

小开

我认为这是头的双重用途。我自己也尝试过类似的方法，但也引起了一些问题。我把我的组件文件大写，以匹配其他的，它工作。

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

应该是

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

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

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

所以我通过删除: ./node_modules/来修复

import React, { Component } from "react";

干杯！

小开

不推荐在 .env中加入环境变量 NODE_PATH，取而代之的是在 jsconfig.json或 tsconfig.json中的 compilerOptions中加入 "baseUrl": "./src"。

参考文献

小开

当我创建一个新的反应应用程序时，我面临着同样的问题，我尝试了 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"
},
小开

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

npm install

继续往下读

小开

我也面临着同样的问题，我解决了它。 查看您的 index.js文件是否在 src文件夹中，那么无论您导入什么文件，包含该文件的文件夹也必须在 src 文件夹中。

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

那么您应该能够使用 ./components/header/header导入(在这种情况下) enter image description here

小开

在我的例子中，错误消息是

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

而所有东西都在正确的目录里。

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

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

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

然后构建错误消失了！

小开

有一个更好的方法，您可以处理您的反应应用程序模块的导入。 考虑这样做:

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

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

现在，与其调用 ../../，你可以很容易地做到这一点:

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

请注意,’组件/’与’. ./组件/’不同

这样更方便。

但是如果你想在同一个目录中导入文件，你也可以这样做:

import logo from './logo.svg'
小开

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

小开

我想这可能会对你有帮助

仔细阅读您的错误-./src/App.js 未找到模块: 无法在“/home/wiseman/Desktop/React _ Component/github-folio/src”中解析“ ./src/Component/header/header”

只需在 App.js 中写入-./header/header

如果它不工作，尝试改变头文件名称可能是头

小开

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

小开

我只是在自动导入组件时遇到了这个问题，没有类型或 webpack 配置问题。

修复方法是将导入从相对于 app 根目录更改为相对于文件:

import MyComponent from "src/components/MyComponent";

到

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

如果您是通过最短路径从 VisualStudio 代码自动导入获得这些信息，那么您可以更改它，使其导入 相对而言。来到这里:

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

"typescript.preferences.importModuleSpecifier": "relative"
小开

如果您正在使用 create-response-app，并且刚刚向其添加了类型脚本，请检查是否已经为您自动生成了 tsconfig.json。CRA 的文档说它应该是，但是 好像有个窃听器目前还没有产生。

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

  • 从互联网或其他回购商那里拷贝一份
  • npx tsc --init
  • 使用 npx create-react-app my-ts-proj --template typescript在其他地方创建一个新的项目，然后从那里复制 tsconfig
小开

我用文件扩展名解决了这个问题

import MyComponent from "src/components/MyComponent";

到

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

它只是(./)在这里不需要 src

import Header from './components/header/header'
小开

你可能在进口。中的 tsx 文件。Js 文件。如果您正在使用 javascript 源代码，请确保您有扩展。JS 或者。不。Tsx:)


提交答案