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

小小飞云2020-03-17

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

控制台表示无法在目录中找到该模块，但是我至少检查了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'));

我至少检查了该模块在此位置的十次./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测试说的是同样的话。

飞云LEYDavaid2020/03/17 12:01:35

就我而言，我重命名了一个组件文件，一个VS Code为我添加以下代码行：

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

因此，我通过删除以下内容进行了修复： ./node_modules/

import React, { Component } from "react";

干杯!

JinJin宝儿2020/03/17 12:01:35

您可以尝试在app文件夹中执行“ npm install”。这也可能解决问题。它为我工作。

GilTom2020/03/17 12:01:35

我有一个类似的问题。

原因：

import HomeComponent from "components/HomeComponent";

解：

import HomeComponent from "./components/HomeComponent";

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

神乐神无2020/03/17 12:01:35

我遇到了同样的问题，并且解决了。查看index.js文件是否在src文件夹中，然后查看要导入的文件，包含该文件的文件夹也必须位于src文件夹内。

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

然后，您将可以使用./components/header/header（在这种情况下）导入在此处输入图片说明

前端村村2020/03/17 12:01:35

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

npm install

进一步阅读

LEY古一逆天2020/03/17 12:01:35

当我创建一个新的react应用程序时，我遇到了同样的问题，我尝试了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"
  },

神无2020/03/17 12:01:35

添加NODE_PATH作为环境变量中.env已被弃用，通过加入取代"baseUrl": "./src"，以compilerOptions在jsconfig.json或tsconfig.json。

参考

泡芙Sam西门2020/03/17 12:01:35

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

NODE_PATH=./src

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer