npm run watch 错误无法读取 'map' 未定义的属性

标签 npm webpack imagemin

问题: 运行命令npm run watch会抛出错误

54% building 35/41 modules 6 active /app/docroot/themes/custom/mytheme/node_modules/css-loader/index.js??ref--10-2!/app/docroot/themes/custom/mytheme/node_modules/postcss-loader/src/index.js??postcss5!/app/docroot/themes
 ERROR  Failed to compile with 1 errors          1:25:50 AM

 error 

Cannot read property 'map' of undefined

 15 assets

ERROR in Cannot read property 'map' of undefined
[Browsersync] Proxying: https://ps.lndo.site

仅当我的 webpack.mix.js 文件中包含以下代码时才会发生错误:

mix.imagemin({
  patterns: [{
    from: '**/*.{png,gif,jpg,jpeg,svg}',
    to: 'images/',
    context: 'src/images/'
  }, {
    from: '**/*.{png,gif,jpg,jpeg,svg}',
    to: 'images/',
    context: 'src/components/'
  }]
  });

删除上面的代码片段可以消除错误,但该项目的先前开发人员出现此错误是有原因的。

由于安全漏洞,我最近进行了更新,并设法调试了另一个问题,即复制插件引入了重大更改(已在上面的代码中更新)。但是我不确定所有配置是否正确。

我已经尝试过: 从命令行

rm -rf node_modules
rm package.lock
npm cache clean --force
npm install

这些是截至 2020 年 8 月 27 日的 package.json 中的软件包

"devDependencies": {
    "bootstrap": "^4.3.1",
    "browser-sync": "^2.26.12",
    "browser-sync-webpack-plugin": "^2.2.2",
    "copy-webpack-plugin": "^6.0.3",
    "cross-env": "^7.0.2",
    "husky": "^4.2.5",
    "imagemin-webpack-plugin": "^2.4.2",
    "jquery": "^3.5.1",
    "laravel-mix": "^5.0.4",
    "laravel-mix-imagemin": "^1.0.3",
    "popper.js": "^1.16.1",
    "pretty-quick": "^2.0.1",
    "resolve-url-loader": "^3.1.1",
    "sass": "^1.26.10",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  },
"dependencies": {
    "throttle-debounce": "^2.3.0"
  }

更新的软件包如下

    "browser-sync": "^2.26.7",
    "copy-webpack-plugin": "^5.1.1",
    "husky": "^4.2.3",
    "jquery": "^3.5.0",
    "sass": "^1.26.3",

    "throttle-debounce": "^2.1.0"

最佳答案

对我来说,这看起来像是 laravel-mix-imagemin 插件中的一个错误。其 NPM 页面显示 "The patterns parameter is automatically converted to an array" 。但这不符合您正在使用的 copy-webpack-plugin^6 (由 laravel-mix-imagemin 在后台使用),因为版本 6 不再接受数组。 (太糟糕了 laravel-mix-imagemin 插件没有正确列出其依赖项及其版本......)

顺便说一句:我遇到了基本上相同的问题,并且您收到的错误消息是一场灾难。

关于npm run watch 错误无法读取 'map' 未定义的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63608065/

相关文章:

npm - 更新 NPM 中的依赖项以解决漏洞

来自 Bundle 的 Symfony Webpack Encore : Import . js

reactjs - OnClick 在使用 React JS 和 webpack 的移动设备上无法正常工作

vue.js - 在 vue-cli 3 项目中使用带有 npm-link 的 vuex store 丢失 $store

webpack - WebPack 条目是否必须是 JavaScript 文件

node.js - 如何在 Sublime 中获取 Node 或 cmd 终端?

node.js - npm 递归更新包

node.js - Node 模块化架构

gulp - 为什么新添加的文件不会触发我的“大吃一惊”任务?

javascript - Gulp imagemin dest.on is not a function 错误