无法在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'.这大致转换为我当前的目录,找到包含头文件的components文件夹.

现在,如果从header.js,你需要import一些东西card,你会做到这一点.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为环境变量 in.env已弃用，并替换为添加"baseUrl": "./src", to compilerOptionsinjsconfig.json或tsconfig.json。

参考

Answer 5

我通过添加文件扩展名解决了

import MyComponent from "src/components/MyComponent";

到

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

Answer 6

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

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

应该

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

Answer 7

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

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

Answer 8

就我而言，错误消息是

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

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

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

所以我在加入这个代码webpack.config.js来解决jsx如js

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

然后构建错误消失了！