无法解析React.js中的模块(未找到) [英] Can't resolve module (not found) in React.js

问题描述

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

I can't believe that I'm asking an obvious question, but I still get the error in console log.

控制台说它无法在目录中找到该模块，但是我至少检查了10次错别字.无论如何，这是组件代码.

Console says that it can't find the module in the directory, but I've checked at least 10 times for typos. Anyways, here's the component code.

我想在根目录中呈现 Header

I want to render Header in root

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").

I've checked at least 10 times that the module is at this location ./src/components/header/header, and it is (folder "header" contains "header.js").

但是，React仍然会抛出此错误:

Yet, React still throws this error:

编译失败

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

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

npm测试说了同样的话.

推荐答案

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

The way we usually use import is based on relative path.

.和..类似于我们在terminal中进行导航的方式，例如cd ..可以移出目录，而mv ~/file .可以将file移至当前目录.

. and .. are similar to how we use to navigate in terminal like cd .. to go out of directory and mv ~/file . to move a file to current directory.

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文件夹.

In your case, App.js is in src/ directory while header.js is in src/components. To import you would do import Header from './components/header'. This roughly translate to in my current directory, find the components folder that contain a header file.

现在，如果来自header.js，则需要import来自card的内容，则可以执行此操作. import Card from '../containers/card'.转换为从当前目录中移出，查找具有卡片文件的文件夹名称容器.

Now, if from header.js, you need to import something from card, you would do this. import Card from '../containers/card'. This translate to, move out of my current directory, look for a folder name containers that have a card file.

对于import React, { Component } from 'react'，它不是以./或../或/开头，因此节点将以特定顺序开始在node_modules中寻找模块，直到找到react.要获得更详细的了解，可以在此处阅读.

As for import React, { Component } from 'react', this does not start with a ./ or ../ or / therefore node will start looking for the module in the node_modules in a specific order till react is found. For a more detail understanding, it can be read here.

这篇关于无法解析React.js中的模块(未找到)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！