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

Question

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

控制台显示它无法在目录中找到该模块，但是我已经检查了至少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 无法解析的模块：在 '/home/wiseman/Desktop/React_Components/github-portfolio/src' 中找不到 './src/components/header/header'

npm test 显示相同的信息。

- Vladimir Jovanović

---

在你的“头文件”上添加“export default Header;”。 - Rui Costa

仍然不起作用。 - Vladimir Jovanović

似乎您需要在不使用src的情况下导入'./components/header/header'。文件路径相对于导入文件路径。然后，您需要从header.js导出Header并修复App.render方法。 - Yury Tarabanko

如果我将components文件夹从src文件夹中移出，那么它会告诉我需要修改node_modules文件，这不是我的意图。 - Vladimir Jovanović

你不需要移动任何文件，只是相对路径有误。如果你在 './src/app.js' 中进行导入，应该写成 import smth from './components/header/header'。同样地，在这一行中 import navBar from './src/components/header/navBar'，它应该是相对于当前路径，所以应该写成 import navBar from './navBar'。 - Yury Tarabanko

这可能与当前情况无关，但也要注意目录路径的大小写。我曾遇到一个情况，我的本地目录是小写的，但在生产环境中它们是大写的。我不得不完全清除我的本地结构，并从生产环境克隆来修复它，否则我将花费大量时间重构目录名称。 - Jordan H

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 Header from './components/header'。这大致相当于，在我的当前目录中，找到包含头文件的组件文件夹。

现在，如果您需要从header.js中导入来自card的东西，可以这样做：import Card from '../containers/card'。这相当于，移出当前目录，查找名为 containers 的文件夹，其中包含一个 card 文件。

至于import React, { Component } from 'react'，它不以./、../或/开头，因此Node将从特定顺序的node_modules中开始查找模块，直到找到react为止。有关更详细的理解，请参阅此处。

- Zac Kwan

Answer 2

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

NODE_PATH=./src

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

- comalex3

---

这是解决我的问题的方法。我在src/中添加了一个简单的App.css，并进行了import App.css。但是这给了我问题的错误。这个答案解决了这个问题。 - Maximiliano Guerra

我以为自己疯了，我的React应用程序没有按预期工作，我只是粘贴了这个环境变量，它就可以正常工作了...问题是为什么它不已经带有这个文件...我不明白，如果React花费十二分钟下载一堆依赖项，为什么不把这些文件也一并提供呢。 - Classy-Bear

Answer 3

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

npm install

阅读更多

- Ivan_ug

---

非常感谢，我遇到了以下错误：模块未找到：无法解析… TextInput，并且您提供的解决方案已经解决了这个问题。 - Vladimir Salguero

这是在我们从外部获得的任何项目上执行的好主意。 - PAS

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

然后构建错误消失了！

- Tuhin A.

---

事实上，在我的情况下，我忘记在扩展数组中加入“.tsx”了。 - code_dude

Answer 5

在.env中添加NODE_PATH作为环境变量已经弃用，现在应该将"baseUrl": "./src"添加到jsconfig.json或tsconfig.json的compilerOptions中来替换它。

参考链接

- Melchia

Answer 6

在处理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'

- Michgolden Ukeje

Answer 7

我认为问题是“header”被重复使用了。我刚刚尝试了类似的方法，也引起了问题。我将组件文件重命名与其他文件相匹配并将其大写，这样就解决了问题。

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

应该是：

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

- FBaez51

---

我讨厌这个给了我答案，因为我有相同的文件夹结构，但我却写成了 ./components/header 而不是 ./components/header/header ... 我太老了，犯这种错误哈哈。 - Chris

@Chris，怎么回事？我也是这样做的，修好了。太令人困惑了。有没有简单的解释？ - Filipe Madureira

Answer 8

我通过添加文件扩展名来解决了这个问题。

import MyComponent from "src/components/MyComponent";

to

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

- Leonardo Soares

---

? TS2691：导入路径不能以“.tsx”扩展名结束。 - TonyG

这是针对此问题的实际修复：https://dev59.com/tFcP5IYBdhLWcg3wa5TQ#62539344 - Liam

Answer 9

I had a similar issue.

Cause:

import HomeComponent from "components/HomeComponent";

解决方案：

import HomeComponent from "./components/HomeComponent";

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

- Bukunmi

Answer 10

如果您正在使用create-react-app，并刚刚添加了typescript，请检查是否已为您自动生成了tsconfig.json。CRA文档表示应该会生成，但目前存在一个错误，即未生成。

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

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

- Cam Jackson