错误：ERROR in ./node_modules/_webpack-dev-server...Module not found: Error: Can't resolve 'webpack/hot

最新推荐文章于 2025-05-06 14:33:55 发布
最新推荐文章于 2025-05-06 14:33:55 发布
阅读量1.3w 收藏 11
点赞数 4
CC 4.0 BY-SA版权
分类专栏： webpack 文章标签： webpack webpack-dev-server npm run dev
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/start_XUEBA/article/details/90607225

学习webpack的途中总是困难重重。

使用webpack-dev-server工具时，运行cnpm run dev后报错：

ERROR in ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://localhost:3000
Module not found: Error: Can't resolve 'webpack/hot' in...

解决：本地安装webpack：npm install webpack

因为webpack-dev-server要求必须在本地安装webpack，即使已经全局安装了webpack，于是我试着本地安装webpack，再次运行npm run dev 就成功了，所以这个错误的原因可能就是因为我没有本地安装webpack吧（如果不是这个原因请赐教）

 

Webpack：Module not found: Error: Can't resolve './dist/bundle2.js' in 'F:\Workspaces\
daponi的博客
11-07 5352
最近学Vue有要学习webpack ,用的webpack 版本是：4.41.2版本的，在打包过程用执行了这个命令 webpack .\src\main.js .\dist\bundle.js 1.然后就报了下边的错误：      后来查看之后原来是版本的问题，我用的这个wepack 版本过高，原来的命令即3.x的wepack在现在新版的已经不...
webpack使用babel-loader打包时报错Module build failed (from ./node_modules/babel-loader/lib/index.js):
WhyTemptFate的博客
07-20 1744
一顿百度之后得出结论，babel的版本冲突。 我用的是webpack 4.x，直接卸载之前装的babel 然后再装最新的babel package.json中可以看到新的依赖 在根目录下新建一个.babelrc文件 webpack.config.js中这样写 npm run build 后打开打包后的js文件,搜索一下ES6的语法 const可以看到没有。 ...
ERROR in Entry module not found: Error: Can't resolve 'webpack-dev-server --open' in 'D:\file‘
IS_huang的博客
04-09 1032
ERROR in Entry module not found: Error: Can't resolve 'webpack-dev-server --open' in 'D:\study\webpack-demo' ERROR in (webpack)-dev-server/client?http://localhost:8080 Module build failed: Error: ENO...
[vue]error:0308010C:digital envelope routines::unsupported
等不到来世
05-06 375
到nodejs官网下载v16.20.2，并安装。-重启vs code,运行 npm run dev。node18不兼容openssl.-卸载nodejs 18.
[object Object] at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay
qq_44130891的博客
11-21 1432
前端页面运行报错：Uncaught runtime errors: ERROR[object Object] at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:299:58) at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:322:7)
webpack/hot/dev-server.jsError: error:0308010C:digital envelope routines::unsupported
菜鸟博客
07-22 1491
webpack/hot/dev-server.jsError: error:0308010C:digital envelope routines::unsupported
RROR in ./node_modules/@pmmmwh/react-refresh-webpack-plugin/overlay/components/CompileErrorTrace.js 2:17-41 Module not found: Error: Can't resolve 'html-entities' in 'E:\hy\mall\mini-program\node_modules\@pmmmwh\react-refresh-webpack-plugin\overlay\components' @ ./node_modules/@pmmmwh/react-refresh-webpack-plugin/overlay/containers/CompileErrorContainer.js 1:26-71 @ ./node_modules/@pmmmwh/react-refresh-webpack-plugin/overlay/index.js 3:30-78 @ ./src/app.config.ts 13:13-44 14:18-49
最新发布
07-05
1. **错误背景**：在Taro项目中，当使用Dart Sass替换node-sass后，构建过程中出现了`Module not found: Can't resolve 'html-entities'`错误。 2. **可能原因**： - `html-entities`是一个用于HTML实体编码解码的...
ERROR in ./node_modules/xhr/index.js Module not found: Error: Can't resolve 'is-function' in '/home/lewy/simple_voting_by_truffle_dapp/webpack-box/app/node_modules/xhr' @ ./node_modules/xhr/index.js 3:17-39 @ ./node_modules/xhr-request/lib/request-browser.js @ ./node_modules/xhr-request/index.js @ ./node_modules/xhr-request-promise/index.js @ ./node_modules/swarm-js/lib/api-browser.js @ ./node_modules/web3-bzz/src/index.js @ ./node_modules/web3/src/index.js @ ./src/index.js 这是npm run dev执行的报错，如何改正
07-09
这个错误通常表示在你的项目中缺少了一个名为'is-function'的依赖项。要解决这个问题，你可以尝试以下几步： 1. 确保你的项目中已经安装了'is-function'这个依赖项。你可以通过在项目根目录下运行以下命令来安装它...
Module not found: Error: Can‘t resolve ‘./app‘ in ‘/home/user/Desktop/my_app/src‘
suiusoar
01-11 727
模块未找到：错误：无法解析 './app'，路径：'/home/user/Desktop/my_app/src'
@ ./src/renderer/main.js @ multi ./.electron-vue/dev-client ./src/renderer/main.js ERROR in ./src/renderer/views/page2-3/index.vue?vue&type=style&index=0&id=b3e81550&lang=scss&scoped=true (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/px2rem-loader??ref--0-2!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/views/page2-3/index.vue?vue&type=style&index=0&id=b3e81550&lang=scss&scoped=true) Module not found: Error: Can't resolve './@assets/images/arrow-right.png' in 'D:\newproject\句容崇明小学文昌校区语文课程基地大屏\jrcmyw\src\renderer\views\page2-3' @ ./src/renderer/views/page2-3/index.vue?vue&type=style&index=0&id=b3e81550&lang=scss&scoped=true (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/px2rem-loader??ref--0-2!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/views/page2-3/index.vue?vue&type=style&index=0&id=b3e81550&lang=scss&scoped=true) 7:875-918 @ ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/px2rem-loader??ref--0-2!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/views/page2-3/index.vue?vue&type=style&index=0&id=b3e81550&lang=scss&scoped=true @ ./src/renderer/views/page2-3/index.vue?vue&type=style&index=0&id=b3e81550&lang=scss&scoped=true @ ./src/renderer/views/page2-3/index.vue 是这么写的吗 有问题啊 background: url('@assets/images/arrow-right.png') no-repeat;
03-20
嗯，用户遇到了Vue项目中背景图片路径配置导致的模块未找到问题，具体错误是“Cannot resolve '@assets/images/arrow-right.png'”。我需要帮他解决这个问题。首先，我得回忆一下Vue项目中如何处理资源路径，尤其是...
ERROR [object Object] at handleError (webpack-internal:///./node_modules/webpack-dev-server/clie
qq_33240556的博客
06-04 2218
这看起来像是与webpack-dev-server相关的错误。通常情况下，这会发生在您的JavaScript代码或配置出现问题时。：如果您正在使用webpack-dev-server，请检查其配置选项。：如果您无法找出问题所在，尝试在线搜索特定的错误消息。：检查您浏览器的开发者控制台是否有其他错误消息。有时，由于依赖项过时或不兼容，可能会导致错误。如果您提供有关您的项目设置和具体错误消息的更多细节，我可以提供更有针对性的建议！：查看错误消息中提到的行附近的代码。确保它们已正确设置，并且配置中没有错误。
vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack
前端小99的博客
12-13 4858
当你页面出现警告信息的时候 会出现警告 然后页面以为是错误 所以红色报错覆盖页面。带着疑问我去查了webpcak中文文档最终发现原因所在。当出现编译错误或警告时，在浏览器中显示全屏覆盖。在vue.config.js中添加如下配置，
webpack-dev-server 运行报错
wujinpengjiusan的博客
11-18 544
这个问题我看了网上很多方法，评论里有些同学是解决了的有些依旧报错。 后来我自己研究了一下发现我的webpack 和webpack-cli 版本过高导致识别不到webpack-dev-server。 然后我把node_modules依赖删除，把webpack版本改成了图上的版本号 重新执行了npm install 然后就成功了 ...
《Webpack 报错》Module not found: Error: Can‘t resolve ‘./@/assets/image/folder.png‘
前端技术
02-16 5806
打包时编译 png 图片错误，检查 webpack.config.js 文件发现缺少 module.rules 配置： { test: /\.(png|jpg|gif|svg)$/, loader: "url-loader", options: { limit:1024000, name: "[name].[ext]?[hash]" } }
使用webpack时遇到Module not found
RealRecall的博客
12-22 952
完整的报错是： Module not found: Error: Can’t resolve ‘a.js’ in ‘D:\programming\trywebpack’ 我解决的方法是，添加配置文件：webpack.config.js 配置文件内容为： module.exports = { entry: "./a", output: { filename: "pack.js", path: __dirname, }, }; 三项的意思是：入口、出口、路径。__dirname表
axios请求错误处理Uncaught runtime errors:handleError@webpack-internal:///./node_modules/webpack-dev-server
weixin_46525113的博客
05-25 2万+
axios请求错误封装处理，全屏弹出Uncaught runtime errors:handleError@webpack-internal:///./node_modules/webpack-dev-server控制台也会全部展示
ERROR in ./node_modules/express/lib/request.js Module not found: Error: Can't resolve 'fs' in 'xx文件'
mrliucx的博客
04-17 3983
ERROR in ./node_modules/express/lib/request.js Module not found: Error: Can’t resolve ‘fs’ in ‘xxx文件夹’ 1.检查是否有fs，没有的话就进行安装npm install ‘xxx’ 错误还存在 ==> 执行步骤2 2.在webpack.config.js下面添加 node: { fs: ‘e...
webpack中遇到 ERROR in ./node_modules/***的解决办法
热门推荐
qq_41672008的博客
04-09 9万+
如果在使用webpack编译时遇到如下情况： 可以看见遇见一片红，但是只要关注开头，就是ERROR in ./node_modules/***，于是可以想到你的node_modules出现了问题， 可能你的包出现问题，但是实际上包出现问题的几率不大，那什么导致了node_modules出现了问题？ 解决方法：原因基本是你在使用babel的时候，babel的文件匹配规则出现了错误，打...
报错 ERROR Failed to compile with 1 error 9:42:34 PM This dependency was not found: * /plugins/leaflet-heat/leaflet-heat.js in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/idleEntityManager/gis/IdleEntityAllListMap.vue?vue&type=script&lang=js To install it, you can run: npm install --save /plugins/leaflet-heat/leaflet-heat.js
03-19
<think>好的，用户遇到了一个编译错误，报错信息显示找不到依赖项`/plugins/leaflet-heat/leaflet-heat.js`。我需要先理解这个问题产生的原因。根据之前的对话，用户是在Vue项目中手动下载并本地引用了Leaflet.heat插件，但现在在编译时出现了问题。 首先，用户的报错信息提示模块找不到，路径是绝对路径`/plugins/...`，这可能是因为在动态导入时使用了绝对路径，而Vue项目在构建时默认会从`src`或`node_modules`中解析模块，无法识别绝对路径。我之前建议用户将插件文件放在`public/plugins`目录下，并使用`import('/plugins/...')`来动态加载。但显然，这个路径在构建时没有被正确解析，导致找不到文件。 接下来，我需要考虑可能的原因： 1. **路径问题**：用户可能没有正确放置文件，或者路径引用错误。`public`目录下的内容在构建时会被复制到输出目录的根目录，所以在生产环境中，`/plugins/leaflet-heat/leaflet-heat.js`应该对应到`public/plugins`下的文件。但在开发环境下，Vue的dev server可能不会自动处理这些路径，尤其是使用动态导入时。 2. **构建工具配置**：Vue项目使用Webpack，而Webpack默认不会处理动态导入的绝对路径，除非配置了相应的别名或路径映射。用户可能没有正确配置Webpack，导致无法解析该路径。 3. **文件位置错误**：用户可能将插件文件放在错误的位置，比如没有放在`public`目录下，而是放在`src`目录中，导致路径引用失败。 接下来，我需要思考解决方案： - **修正路径**：动态导入的路径应该相对于public目录，或者使用相对路径。比如，如果文件放在`public/plugins`，那么正确的路径应该是`/plugins/leaflet-heat/leaflet-heat.js`，但需要确保在开发和生产环境下都能正确访问。 - **使用相对路径或别名**：建议用户使用相对路径，或者配置Webpack别名，以便正确解析路径。或者将文件放在`src`目录下的某个位置，并通过相对路径导入。 - **检查文件位置**：确保用户确实将文件放在了正确的目录下，比如`public/plugins`，并且文件名正确，没有拼写错误。 另外，用户得到的错误建议是运行`npm install --save /plugins/leaflet-heat/leaflet-heat.js`，这显然是不正确的，因为这是一个本地文件，而不是npm仓库中的包。这说明用户可能误用了npm install命令，但实际上应该通过正确的路径引用本地文件。 可能的解决方案步骤： 1. **确认文件位置**：检查文件是否放置在`public/plugins/leaflet-heat`目录下，并且文件名正确。 2. **修正导入路径**：在动态导入时，使用正确的路径。如果文件在public目录下，可能需要使用`/plugins/...`，但需要考虑Vue项目的baseUrl配置。或者使用相对路径`./public/plugins/...`，但需要测试是否正确。 3. **使用require代替动态导入**：可能需要使用require来引入文件，或者将文件放在assets目录，通过require引入，这样Webpack会处理资源路径。 4. **配置Webpack别名**：在vue.config.js中配置别名，使得可以更方便地引用public目录下的文件。 此外，用户可能没有正确配置静态资源的处理方式，导致Webpack无法找到文件。需要指导用户正确放置文件，并使用正确的引用方式。 最后，可能需要建议用户使用npm安装Leaflet.heat插件，而不是手动下载，这样可以避免路径问题。但用户可能因为某些原因需要本地引用，所以需要提供两种解决方案：修正本地引用或通过npm安装。 总结来说，问题的核心在于路径引用错误，需要调整文件位置或导入路径，确保Webpack能够正确解析到该文件。</think>以下是针对该编译错误的详细解决方案分析： 🔍 **错误原因分析** ```bash ERROR Failed to compile with 1 error # 关键错误信息： This dependency was not found: /plugins/leaflet-heat/leaflet-heat.js ``` 该错误表明Webpack在编译时无法解析以下路径： $$ \text{绝对路径引用问题} + \text{文件位置错误} $$ --- 🛠️ **解决方案分步说明** 1. **修正文件位置** ```bash # 将插件文件移动到正确位置 your-project/ ├── public/ │ └── plugins/ │ └── leaflet-heat/ │ ├── leaflet-heat.js │ └── leaflet-heat.min.js ``` 2. **修改组件引用方式** ```vue // 错误写法 ❌ import('/plugins/leaflet-heat/leaflet-heat.js') // 正确写法 ✅（使用项目根相对路径） mounted() { import('../../../public/plugins/leaflet-heat/leaflet-heat.js').then(() => { this.initMap() }) } ``` 3. **Webpack配置强化** 在`vue.config.js`中添加路径别名： ```javascript module.exports = { configureWebpack: { resolve: { alias: { '@heat': path.resolve(__dirname, 'public/plugins/leaflet-heat') } } } } ``` 组件中使用别名： ```javascript import('@heat/leaflet-heat.js') ``` --- 💡 **替代方案推荐** ```bash # 更推荐通过npm安装官方包 npm install leaflet.heat --save ``` 然后在组件中直接使用： ```javascript import 'leaflet.heat' ``` --- ⚠️ **关键注意事项** 1. 使用相对路径时，需根据实际文件层级关系调整`../`的数量 2. 浏览器缓存问题可能导致修改后仍报错，尝试： ```bash rm -rf node_modules/.cache npm run serve ``` 3. 文件编码问题检查（确保JS文件为UTF-8格式） --- 📝 **完整修正示例** ```vue <script> export default { mounted() { // 使用相对路径加载（假设组件在src/views目录） import('../../../../public/plugins/leaflet-heat/leaflet-heat.min.js') .then(() => { this.initMap() }) .catch(error => { console.error('Heatmap加载失败:', error) }) } } </script> ``` 通过上述调整，可解决模块路径解析失败的问题。如果仍有问题，建议提供完整的项目目录结构截图以便进一步诊断。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值