Node v20.9.0执行npm run watch报TypeError读取scripts未定义错误

使用 Node v20.9.0、npm v10.1.0 版本，执行 npm run watch 命令时抛出以下错误：

[webpack-cli] TypeError: Cannot read properties of undefined (reading 'scripts')
at Object. (c:\OSPanel\domains\dispatcher\webpack.mix.js:16:4)
at Module._compile (node:internal/modules/cjs/loader:1241:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
at Module.load (node:internal/modules/cjs/loader:1091:32)
at Module._load (node:internal/modules/cjs/loader:938:12)
at Module.require (node:internal/modules/cjs/loader:1115:19)
at require (node:internal/modules/helpers:130:18)
at module.exports (c:\OSPanel\domains\dispatcher\node_modules\laravel-mix\setup\webpack.config.js:11:5)
at loadConfigByPath (c:\OSPanel\domains\dispatcher\node_modules\webpack-cli\lib\webpack-cli.js:1445:37)
at async Promise.all (index 0)

package.json 配置 #

"scripts": {    
    "dev": "npm run development",  
    "development": "mix",
    "watch": "mix watch",  
    "watch-poll": "mix watch -- --watch-options-poll=1000",  
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
},
"devDependencies": {
    "axios": "^1.6.1",    
    "bootstrap-sass": "^3.3.7",      
    "cross-env": "^5.0.1",      
    "jquery": "^3.1.1",  
    "laravel-mix": "^6.0.49",  
    "lodash": "^4.17.4",  
    "vue": "^2.1.10",  
    "webpack": "^5.89.0",  
    "webpack-cli": "^5.1.4"  
}

webpack.mix.js 配置 #

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css').
mix.scripts([
    'public/test/jquery.easing.1.3.js',
    'public/test/retina-1.1.0.min.js',
    'public/test/jquery.cookie.js',
    'public/test/styleswitch.js',
    'public/test/jquery.smartmenus.min.js',
    'public/test/jquery.smartmenus.bootstrap.min.js',
    'public/test/owl.carousel.min.js',
    'public/test/jflickrfeed.js',
    'public/test/jquery.magnific-popup.min.js',
    'public/test/jquery.isotope.min.js',
    'public/test/swipe.js',
    'public/test/jquery.sticky.js',
    'public/test/main.js',  
],  
    'public/js/all.js').mix.scripts([
    'public/test/fileinput.min.js',
    'public/test/inputmask.js',
    'public/test/jquery.inputmask.js',
    'public/test/flash_message.js',
    'public/test/select2.min.js',
    'public/test/ru.js',
    'public/test/text_area_counter.js',
    'public/test/text_area_counter.js',
    'public/test/file_input.js',
 ], 'public/js/libs.js');

已尝试重装 webpack-cli 并清理 npm 缓存（npm cache clean --force），但无效，请问如何修复该错误？

这个错误的根源是 webpack.mix.js 中的语法错误：在 .sass() 方法末尾多了一个英文句号（.），导致后续的 mix.scripts() 调用变成了尝试读取 undefined 对象的 scripts 属性，触发了 TypeError。

修复步骤：

1. 打开 webpack.mix.js 文件
2. 删除第3行末尾多余的英文句号，修正后的完整代码如下：

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .scripts([
        'public/test/jquery.easing.1.3.js',
        'public/test/retina-1.1.0.min.js',
        'public/test/jquery.cookie.js',
        'public/test/styleswitch.js',
        'public/test/jquery.smartmenus.min.js',
        'public/test/jquery.smartmenus.bootstrap.min.js',
        'public/test/owl.carousel.min.js',
        'public/test/jflickrfeed.js',
        'public/test/jquery.magnific-popup.min.js',
        'public/test/jquery.isotope.min.js',
        'public/test/swipe.js',
        'public/test/jquery.sticky.js',
        'public/test/main.js',  
    ],  
        'public/js/all.js')
    .scripts([
        'public/test/fileinput.min.js',
        'public/test/inputmask.js',
        'public/test/jquery.inputmask.js',
        'public/test/flash_message.js',
        'public/test/select2.min.js',
        'public/test/ru.js',
        'public/test/text_area_counter.js',
        'public/test/text_area_counter.js',
        'public/test/file_input.js',
     ], 'public/js/libs.js');

3. 保存文件后，重新执行 npm run watch 命令即可正常运行。

额外注意：你提供的 package.json 代码中，devDependencies 后面缺少了 {，如果实际文件中确实存在这个问题，也需要补上，否则会导致 npm 依赖安装失败。

内容的提问来源于stack exchange，提问作者XenoProxy