Javascript 无法解析 React.js 中的模块（未找到）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44439205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't resolve module (not found) in React.js
提问by Vladimir Jovanovi?
I can't believe that I'm asking an obvious question, but I still get the error in console log.
我不敢相信我问的是一个明显的问题，但我仍然在控制台日志中收到错误消息。
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.
控制台说它在目录中找不到模块，但我已经检查了至少 10 次是否有错别字。无论如何，这是组件代码。
I want to render Headerin root
我想在 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;
This is the Headercomponent
这是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'));
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").
我已经检查了至少 10 次模块在这个位置./src/components/header/header，它是（文件夹“header”包含“header.js”）。
Yet, React still throws this error:
然而，React 仍然抛出这个错误：
Failed to compile
编译失败
./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 testsays the same thing.
npm test说同样的话。
回答by Zac Kwan
The way we usually use importis based on relative path.
我们通常使用的方式import是基于相对路径。
.and ..are similar to how we use to navigate in terminallike cd ..to go out of directory and mv ~/file .to move a fileto current directory.
.并且..类似于我们用来导航的方式，terminal例如cd ..退出目录并将mv ~/file .a 移动file到当前目录。
my-app/
node_modules/
package.json
src/
containers/card.js
components/header.js
App.js
index.js
In your case, App.jsis in src/directory while header.jsis in src/components. To importyou would do import Header from './components/header'. This roughly translate to in my current directory, find the components folder that contain a header file.
在您的情况下，App.js在src/目录中而header.js在src/components. 要import你会怎么做import Header from './components/header'。这大致翻译为在我当前的目录中，找到包含头文件的组件文件夹。
Now, if from header.js, you need to importsomething 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.
现在，如果 from header.js，你需要import一些 from 的东西card，你会这样做。import Card from '../containers/card'. 这转换为，移出我的当前目录，查找具有卡文件的文件夹名称容器。
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_modulesin a specific order till reactis found. For a more detail understanding, it can be read here.
至于import React, { Component } from 'react'，这不符合启动./或../或/因此节点将开始寻找在该模块node_modules，直到以特定的顺序react被发现。更详细的理解，可以在这里阅读。
回答by comalex3
If you create an application with react-create-app, don't forget set environment variable:
如果您使用 react-create-app 创建应用程序，请不要忘记设置环境变量：
NODE_PATH=./src
Or add to .envfile to your root folder;
或将.env文件添加到您的根文件夹；
回答by Ivan_ug
Deleted the package-lock.json file & then ran
删除了 package-lock.json 文件然后运行
npm install
回答by Melchia
回答by seb_dom
I faced the same issue when I created a new react app, I tried all options in https://github.com/facebook/create-react-app/issues/2534but it didn't help. I had to change the port for the new app and then it worked. By default, apps use the port 3000.I changed the port to 8001 in package.json as follows:
当我创建一个新的 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"
},
回答by Biraj Gupta
I was facing the same problem and I resolved it.
See if your index.jsfile is in srcfolder, then what ever file you are importing, the folder containing that must also be inside the src folder.
我遇到了同样的问题，我解决了它。查看您的index.js文件是否在src文件夹中，然后您要导入什么文件，包含该文件的文件夹也必须在 src 文件夹中。
That means if your components folder is outside the srcfolder, just drag it inside the srcfolder in your editor because the files outside of srcfolder are not imported.
这意味着如果您的 components 文件夹在src文件夹外，只需将其拖到src编辑器中的文件夹内，因为文件src夹外的文件不会被导入。
Then you shall be able to import using ./components/header/header(in this case)
然后你就可以使用./components/header/header（在这种情况下）
导入
回答by sobha
You need to be in project folder, if you are in srcor publicyou have to come out of those folders. Suppose your react-project name is 'hello-react' then cd hello-react
您需要在项目文件夹中，如果您在src或public必须从这些文件夹中出来。假设你的反应项目名称是“hello-react”然后cd hello-react
回答by Bukunmi
I had a similar issue.
我有一个类似的问题。
Cause:
原因：
import HomeComponent from "components/HomeComponent";
Solution:
解决方案：
import HomeComponent from "./components/HomeComponent";
NOTE:./was before components. You can read @Zac Kwan's post above on how to use import
注意：./在组件之前。您可以阅读上面@Zac Kwan 关于如何使用的帖子import
回答by harun ugur
you should change import Header from './src/components/header/header' to
您应该从 ' 更改导入标题。/src/components/header/header' 到
import Header from '../src/components/header/header'
进口头从“ ../ SRC /组件/报头/报头”
回答by Niki Palyi
You can try to execute 'npm install' in the app folder. This might also solve the problem. It worked for me.
您可以尝试在应用程序文件夹中执行“npm install”。这也可能解决问题。它对我有用。
