无法解析 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 Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

npm test 说了同样的话。

原文由 Vladimir Jovanović 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 。如需更详细的了解，可以阅读 此处。

原文由 Zac Kwan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

 NODE_PATH=./src

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

原文由 comalex3 发布，翻译遵循 CC BY-SA 4.0 许可协议