我有一个app(node_modules
dir的结构从这个列表中排除):
├── 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
我的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:
{
"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"
}
}
当我运行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
我的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
例如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
似乎它不理解双点的相对路径,如../something
?
我是否需要以某种方式配置webpack
才能理解这些路径?
答案 0 :(得分:14)
您的文件结构表明文件夹名称为Container
,大写为C.但您尝试使用小写c container
导入它。您需要更改其中一个,因为路径区分大小写。
答案 1 :(得分:7)
我在使用 typescript
时遇到了这个问题,但忘记在 ts
条目中添加 tsx
和 resolve
后缀。
module.exports = {
...
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
};
这对我有用
答案 2 :(得分:2)
只需将其添加到您的配置中即可。来源:https://www.jumoel.com/2017/zero-to-webpack.html
externals: [ nodeExternals() ]
答案 3 :(得分:2)
如果你有一个打字稿文件,你必须通过在 webpack.config.js 中使用下面的代码来指示 webpack 解析它们
module.exports={
...
resolve:{
extensions:['.ts','.tsx';]
}
}
答案 4 :(得分:1)
找不到模块的相同问题。事实证明我有一个组件
import Picture from './Picture/Picture';
位于所有进口的最底层。当我将它移到import React, { Component } from 'react';
以下时,它就有效了。
答案 5 :(得分:1)
例如,在导入库时使用文件的确切路径:
import Footer from './Footer/index.jsx'
import AddTodo from '../containers/AddTodo/index.jsx'
import VisibleTodoList from '../containers/VisibleTodoList/index.jsx'
希望这会有所帮助
答案 6 :(得分:1)
查看路径,例如此导入不正确 从“ @ / components / Navbar.vue”导入导航栏 应该看起来像这样 **从'./components/Navbar.vue'导入Navbar **
答案 7 :(得分:1)
就遇到了这个问题...我有一个在多个转译产品之间共享的公共库。我使用带有早午餐的符号链接来处理项目之间的共享。移至webpack时,此操作停止工作。
使用webpack配置关闭符号链接解析确实可以使工作正常进行。
即在webpack.config.js
中添加它:
module.exports = {
//...
resolve: {
symlinks: false
}
};
如此处所述:
https://webpack.js.org/configuration/resolve/#resolvesymlinks
答案 8 :(得分:0)
我有一个不同的问题。我的一些包含项设置为“ app / src / xxx / yyy”,而不是“ ../ xxx / yyy”
答案 9 :(得分:0)
如果您使用多个node_modules
(纱线工作区等),请告诉webpack它们在哪里:
externals: [nodeExternals({
modulesDir: path.resolve(__dirname, '../node_modules'),
}), nodeExternals()],
答案 10 :(得分:0)
将 private static int findFreePort() {
int port = 0;
// For ServerSocket port number 0 means that the port number is automatically allocated.
try (ServerSocket socket = new ServerSocket(0)) {
// Disable timeout and reuse address after closing the socket.
socket.setReuseAddress(true);
port = socket.getLocalPort();
} catch (IOException ignored) {}
if (port > 0) {
return port;
}
throw new RuntimeException("Could not find a free port");
}
更改为 templateUrl: ''
已修复