![](/img/trans.png)
[英]Webpack: Module not found: Error: Can't resolve './containers'
[英]Webpack: npm start "Module not found: Error: Can't resolve ..." after moving location for webpack / react files
我的项目正在运行,我能够在使用 Chrome 时在 localhost:8080 上查看我的网页。 我试图学习一些东西,所以我将所有文件都放在一个名为“dir copy”的文件夹中,而不仅仅是 dir。 当一切都如我所愿时,我将所有文件移回“目录”并关闭浏览器。 当我再次尝试运行npm start
时,我收到了这个错误输出
npm start 的输出
Jacob:Name_html Jacob$ npm start > Name@ start Dir/Name/Name_html > node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js ℹ 「wds」: Project is running at http://localhost:8080/ ℹ 「wds」: webpack output is served from / ℹ 「wds」: Content not from webpack is served from Dir/Name/Name_html ✖ 「wdm」: Hash: a0d05c0fdc6ff660f346 Version: webpack 4.35.0 Time: 1985ms Built at: 06/28/2019 3:29:15 AM Asset Size Chunks Chunk Names ./bundle.js 908 KiB main [emitted] main Entrypoint main = ./bundle.js [1] multi (webpack)-dev-server/client?http://localhost ./src/index.jsx 40 bytes {main} [built] [./es6/Banner.js] 1010 bytes {main} [built] [./es6/Footer.js] 320 bytes {main} [built] [./es6/Header.js] 387 bytes {main} [built] [./es6/HomePageServices.js] 3.4 KiB {main} [built] [./es6/NavBar.js] 689 bytes {main} [built] [./node_modules/react-dom/cjs/react-dom.development.js] 768 KiB {main} [built] [./node_modules/react-dom/index.js] 1.33 KiB {main} [built] [./node_modules/react/cjs/react.development.js] 62.3 KiB {main} [built] [./node_modules/react/index.js] 190 bytes {main} [built] [./node_modules/scheduler/cjs/scheduler.development.js] 23.3 KiB {main} [built] [./node_modules/scheduler/index.js] 198 bytes {main} [built] [./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 4.29 KiB {main} [built] [./node_modules/webpack/hot sync ^\\.\\/log$] (webpack)/hot sync nonrecursive ^\\.\\/log$ 160 bytes {main} [built] [./src/index.jsx] 561 bytes {main} [built] + 2 hidden modules ERROR in (webpack)-dev-server/client?http://localhost Module not found: Error: Can't resolve './overlay' in 'Dir/Name/Name_html/node_modules/webpack-dev-server/client' @ (webpack)-dev-server/client?http://localhost 10:14-34 @ multi (webpack)-dev-server/client?http://localhost ./src/index.jsx ERROR in (webpack)-dev-server/client?http://localhost Module not found: Error: Can't resolve './socket' in 'Dir/Name/Name_html/node_modules/webpack-dev-server/client' @ (webpack)-dev-server/client?http://localhost 8:13-32 @ multi (webpack)-dev-server/client?http://localhost ./src/index.jsx ERROR in (webpack)-dev-server/client?http://localhost Module not found: Error: Can't resolve './utils/createSocketUrl' in 'Dir/Name/Name_html/node_modules/webpack-dev-server/client' @ (webpack)-dev-server/client?http://localhost 20:22-56 @ multi (webpack)-dev-server/client?http://localhost ./src/index.jsx ERROR in (webpack)-dev-server/client?http://localhost Module not found: Error: Can't resolve './utils/log' in 'Dir/Name/Name_html/node_modules/webpack-dev-server/client' @ (webpack)-dev-server/client?http://localhost 12:15-37 @ multi (webpack)-dev-server/client?http://localhost ./src/index.jsx ERROR in (webpack)-dev-server/client?http://localhost Module not found: Error: Can't resolve './utils/reloadApp' in 'Dir/Name/Name_html/node_modules/webpack-dev-server/client' @ (webpack)-dev-server/client?http://localhost 18:16-44 @ multi (webpack)-dev-server/client?http://localhost ./src/index.jsx ERROR in (webpack)-dev-server/client?http://localhost Module not found: Error: Can't resolve './utils/sendMessage' in 'Dir/Name/Name_html/node_modules/webpack-dev-server/client' @ (webpack)-dev-server/client?http://localhost 16:18-48 @ multi (webpack)-dev-server/client?http://localhost ./src/index.jsx ERROR in ./node_modules/react-dom/cjs/react-dom.development.js Module not found: Error: Can't resolve 'object-assign' in 'Dir/Name/Name_html/node_modules/react-dom/cjs' @ ./node_modules/react-dom/cjs/react-dom.development.js 19:14-38 @ ./node_modules/react-dom/index.js @ ./src/index.jsx @ multi ./src/index.jsx ERROR in ./node_modules/react/cjs/react.development.js Module not found: Error: Can't resolve 'object-assign' in 'Dir/Name/Name_html/node_modules/react/cjs' @ ./node_modules/react/cjs/react.development.js 18:14-38 @ ./node_modules/react/index.js @ ./src/index.jsx @ multi ./src/index.jsx ERROR in ./node_modules/react-dom/cjs/react-dom.development.js Module not found: Error: Can't resolve 'prop-types/checkPropTypes' in 'Dir/Name/Name_html/node_modules/react-dom/cjs' @ ./node_modules/react-dom/cjs/react-dom.development.js 20:21-57 @ ./node_modules/react-dom/index.js @ ./src/index.jsx @ multi ./src/index.jsx ERROR in ./node_modules/react/cjs/react.development.js Module not found: Error: Can't resolve 'prop-types/checkPropTypes' in 'Dir/Name/Name_html/node_modules/react/cjs' @ ./node_modules/react/cjs/react.development.js 19:21-57 @ ./node_modules/react/index.js @ ./src/index.jsx @ multi ./src/index.jsx ERROR in ./node_modules/react-dom/cjs/react-dom.development.js Module not found: Error: Can't resolve 'scheduler/tracing' in 'Dir/Name/Name_html/node_modules/react-dom/cjs' @ ./node_modules/react-dom/cjs/react-dom.development.js 22:14-42 @ ./node_modules/react-dom/index.js @ ./src/index.jsx @ multi ./src/index.jsx ERROR in (webpack)-dev-server/client?http://localhost Module not found: Error: Can't resolve 'strip-ansi' in 'Dir/Name/Name_html/node_modules/webpack-dev-server/client' @ (webpack)-dev-server/client?http://localhost 6:16-37 @ multi (webpack)-dev-server/client?http://localhost ./src/index.jsx ℹ 「wdm」: Failed to compile.
这些是一些没有奏效的方法
添加modules: ["src", "node_modules"]
到 webpack.config.js
删除 node_modules 并再次运行 npm install
源代码/索引.jsx
import React from 'react'; import ReactDOM from 'react-dom'; import someSelfCreatedComponents from ../es6/SelfCreatedComponents const Content = () => { return ( <React.Fragment> <Header /> <Banner /> <MoreThings /> <Footer /> </React.Fragment> ) } ReactDOM.render ( <Content />, document.getElementById('Content') )
webpack.config.js
module.exports = { entry: [ './src/index.jsx' ], output: { filename: './bundle.js' //File that all react gets compioled into }, module: { rules: [ { exclude: /node_modules/, use: [ 'babel-loader' ] } ] }, resolve: { extensions: ['js', '.jsx'] } }
包.json
{ "name": "Name", "version": "", "description": "", "main": "index.js", "scripts": { "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js" }, "dependencies": { "@babel/preset-es2015": "^7.0.0-beta.53", "babel-core": "^6.26.3", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-1": "^6.24.1", "react": "^16.8.6", "react-dom": "^16.8.6", "webpack-cli": "^3.3.5", "webpack-dev-server": "^3.7.2" }, "devDependencies": { "@babel/core": "^7.4.5", "@babel/preset-env": "^7.4.5", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.6", "webpack": "^4.35.0" } }
.babelrc
{ "presets": ["@babel/preset-react", "@babel/preset-env"] }
索引.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Name</title> <link rel="stylesheet" type="text/css" href="css/Main.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1.00, maximum-scale=1.10, minimum-scale=0.80"> </head> <body> <div id='Content'></div> <script src='bundle.js'></script> </body> </html>
档案整理
更新
我在下面的答案中阅读了 Saheed 发布的博客文章,并尝试通过删除webpack.config.js文件来修复我的项目,并将文件缩减为
module.exports = { module: { rules: [ { exclude: /node_modules/, use: [ 'babel-loader' ] } ] }, resolve: { extensions: ['js', '.jsx'] } }
两次尝试后,我仍然收到相同的错误。
如果你想避免核选项,请确保.js
包含在 webpack 的解析扩展中。
这里的问题可能是由于缺少.
在js
之前:
module.exports = {
// ...
resolve: {
extensions: ['.js', '.jsx']
}
}
找到了一个解决方案,但它并没有完全回答我的代码出了什么问题,下面有一条评论试图回答问题是什么。
我删除了我的 .babelrc、package-lock.json、webpack.config.js、package.json 和 node 模块,然后按照本教程从头开始设置 react、babel7 和 webpack4 ,因为它是我能想到的最有用的一个找
这是它的摘要
他们开始于
mkdir default && cd default && yarn init -y
然后我安装了以下模块
npm install @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader -D
并将下面的代码复制并粘贴到文件.babelrc 中
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
我安装了更多模块
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin html-webpack-template -D
并将下面的代码复制并粘贴到webpack.config.js 中(稍作调整,因为我收到错误Uncaught Error: Target container is not a DOM element.
)
const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackTemplate = require('html-webpack-template'); const path = require('path'); const config = { entry: './src/index.js', output: { path: path.resolve(__dirname, './dist'), filename: 'bundle.js', }, module: { rules: [ { test: /\\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/, }, ], }, resolve: { extensions: ['.js', '.jsx'], }, }; module.exports = config;
npm install react react-dom
而且我没有更改我的index.js ,但是教程中列出的那个是
import React from "react"; import ReactDOM from "react-dom"; function App() { return ( <div> <h1>Hello blog readers</h1> </div> ); } const rootElement = document.getElementById("app"); ReactDOM.render(<App />, rootElement);
就我而言,我正在处理打字稿项目。
我使用的是 ts-loader 版本 8.2.0 并且我升级到版本 ts-loader@9.2.5 并且错误消失了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.