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

Question

问题：运行命令 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

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

"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"

Answer 1

您可能对 webpack 的版本有疑问。这是我能做出的最佳猜测。如果此代码之前有效，那么这可能是一种可能性。

Answer 2

没有找到很好的答案，目前只是从 webpack mix 中删除了 imagemin 配置。修复了编译问题，但没有解决我原来的问题。

Answer 3

对我来说，这看起来像是 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 运行 watch 无法读取 'map' 未定义的 属性 错误

npm run watch Error in Cannot read property of 'map' undefined

npm

webpack

imagemin

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