Javascript webpack：找不到模块：错误：无法解析（使用相对路径）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45968302/
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
webpack: Module not found: Error: Can't resolve (with relative path)
提问by Andrius
I have this structure of an app (node_modulesdir excluded from this list):
我有一个应用程序的结构（node_modules目录不包括在这个列表中）：
├── actions.js
├── bundle.js
├── components
│?? ├── App.js
│?? ├── Footer.js
│?? ├── Link.js
│?? ├── Todo.js
│?? └── TodoList.js
├── Containers
│?? ├── AddTodo.js
│?? ├── FilterLink.js
│?? └── VisibleTodoList.js
├── index.html
├── index.js
├── main.js
├── package.json
├── package-lock.json
├── reducers.js
└── webpack.config.js
My webpack config looks like this:
我的 webpack 配置如下所示：
module.exports = {
entry: "./main.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
npm config:
npm 配置：
{
"name": "webpack-redux",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "nothing"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"webpack": "^3.5.5"
},
"dependencies": {
"react": "^15.6.1",
"babel-preset-react": "^6.24.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"redux": "^3.7.2"
}
}
When I run webpackcommand, I get this error:
当我运行webpack命令时，出现此错误：
ERROR in ./components/App.js
Module not found: Error: Can't resolve '../containers/AddTodo' in '/home/oerp/js-programs/redux-test/components'
@ ./components/App.js 11:15-47
@ ./index.js
@ ./main.js
ERROR in ./components/Footer.js
Module not found: Error: Can't resolve '../containers/FilterLink' in '/home/oerp/js-programs/redux-test/components'
@ ./components/Footer.js 11:18-53
@ ./components/App.js
@ ./index.js
@ ./main.js
ERROR in ./components/App.js
Module not found: Error: Can't resolve '../containers/VisibleTodoList' in '/home/oerp/js-programs/redux-test/components'
@ ./components/App.js 15:23-63
@ ./index.js
@ ./main.js
My components/App.jscontent is this:
我的components/App.js内容是这样的：
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'
const App = () => (
<div>
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
)
export default App
And for example containers/AddTodo.js:
例如containers/AddTodo.js：
import { connect } from 'react-redux'
import { addTodo } from '../actions'
let AddTodo = ({ dispatch }) => {
let input
return (
<div>
<form
onSubmit={e => {
e.preventDefault()
if (!input.value.trim()) {
return
}
dispatch(addTodo(input.value))
input.value = ''
}}
>
<input
ref={node => {
input = node
}}
/>
<button type="submit">
Add Todo
</button>
</form>
</div>
)
}
AddTodo = connect()(AddTodo)
export default AddTodo
It seems it does not understand relative path with double dots, like ../something?
它似乎不理解双点的相对路径，比如../something？
Do I need to configure webpacksomehow for it to understand such paths?
我是否需要以webpack某种方式配置它才能理解这些路径？
回答by Joseph Ditton
Your file structure says that folder name is Containerwith a capital C. But you are trying to import it by containerwith a lowercase c. You will need to change the import or the folder name because the paths are case sensitive.
您的文件结构说文件夹名称是Container大写的 C。但是您正尝试container使用小写的 c导入它。您将需要更改导入或文件夹名称，因为路径区分大小写。
回答by Habib Mammadov
while importing libraries use exact path to a file for example:
导入库时使用文件的确切路径，例如：
import Footer from './Footer/index.jsx'
import AddTodo from '../containers/AddTodo/index.jsx'
import VisibleTodoList from '../containers/VisibleTodoList/index.jsx'
Hope this may help
希望这可能会有所帮助
回答by Cavid Mamedov
Just add it to your config. Source: https://www.jumoel.com/2017/zero-to-webpack.html
只需将其添加到您的配置中即可。来源：https: //www.jumoel.com/2017/zero-to-webpack.html
externals: [ nodeExternals() ]
回答by m Piroli
Look the path for example this import is not correct import Navbar from '@/components/Navbar.vue'should look like this ** import Navbar from './components/Navbar.vue'**
查看路径，例如此导入不正确 import Navbar from '@/components/Navbar.vue'应该如下所示 ** import Navbar from './components/Navbar.vue'**
回答by Deke
Had the same issue with module not found. Turns out I had a component
import Picture from './Picture/Picture';at the very bottom of all the imports. When I moved it below import React, { Component } from 'react';, it worked.
与找不到模块有同样的问题。结果我import Picture from './Picture/Picture';在所有导入的最底部都有一个组件
。当我将它移到下方时import React, { Component } from 'react';，它起作用了。
