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

javascript reactjs

2022-08-30 02:23:47

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

控制台说它在目录中找不到模块，但我已经检查了至少10次拼写错误。无论如何，这是组件代码。

我想在根目录中呈现标头

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次模块位于此位置，并且是（文件夹“header”包含“header.js”）。./src/components/header/header

然而，React 仍然抛出这个错误：

编译失败

./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

npm测试也说了同样的事情。

答案 1

我们通常使用的方式是基于相对路径的。import

.并且类似于我们用于导航的方式，例如离开目录并将a移动到当前目录。..terminalcd ..mv ~/file .file

my-app/
  node_modules/
  package.json
  src/
    containers/card.js
    components/header.js
    App.js
    index.js

在您的情况下，在目录中，而在中。对你会做的.这大致转换为在我当前的目录中，找到包含头文件的组件文件夹。App.jssrc/header.jssrc/componentsimportimport Header from './components/header'

现在，如果从，你需要从中做一些事情，你会这样做。.这转换为，移出我的当前目录，查找具有卡文件的文件夹名称容器。header.jsimportcardimport Card from '../containers/card'

至于，这不会以 or 开头，因此节点将开始以特定顺序查找模块，直到找到为止。有关更详细的理解，可以在此处阅读。import React, { Component } from 'react'./..//node_modulesreact

答案 2

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

NODE_PATH=./src

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