laravel使用npm构建报错laravel-mix/src/Mix.js:18 static _primary = null

在使用npm构建laravel8项目时遇到错误:laravel-mix/src/Mix.js:18 static _primary = null。尝试删除node_modules并重装或更换npm源无效。问题根源是node版本过低,解决方法是升级node版本,通过运行升级命令之一即可修复问题。

问题

今天在使用npm构建laravel8项目时出现报错: laravel使用npm构建报错laravel-mix/src/Mix.js:18 static _primary = null

> mix watch -- --watch-options-poll=1000

[webpack-cli] /www/wwwroot/xxx/node_modules/laravel-mix/src/Mix.js:18
    static _primary = null;
                    ^

SyntaxError: Unexpected token =
    at new Script (vm.js:83:7)
    at NativeCompileCache._moduleCompile (/www/wwwroot/xxx/node_modules/v8-compile-cache/v8-compile-cache.js:240:18)
    at Module._compile (/www/wwwroot/xxx/node_modules/v8-compile-cache/v8-compile-cache.js:184:36)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (/www/wwwroot/xxx/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at module.exports (/www/wwwroot/xxx/node_modules/laravel-mix/setup/webpack.config.js:2:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ watch-poll: `mix watch -- --watch-options-poll=1000`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ watch-poll script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-01-21T09_04_30_514Z-debug.log

方法

于是上网查了很多资料,很多都是说,删除node_modules重装,或者更换taobao镜像,但是试了都不好使, 最后自己摸索,发现是node版本问题,于是,解决这里的问题只需要升级node版本即可

使用命令:(后两条命令选择一条即可)

# 安装n依赖包
npm install -g n
# 安装最新稳定版(推荐)
n stable
# 安装最新版
n latest

原文链接:https://www.wjcms.net/archives/laravel%E4%BD%BF%E7%94%A8npm%E6%9E%84%E5%BB%BA%E6%8A%A5%E9%94%99laravel-mixsrcmixjs18staticprimarynull

前端启动报错ERROR in ./src/views/modules/huodongbaoming/add-or-update.vue Invalid value used as weak map key @ ./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/modules/huodongbaoming/list.vue?vue&type=script&lang=js 202:1-43 259:3-14 @ ./src/views/modules/huodongbaoming/list.vue?vue&type=script&lang=js 1:0-133 1:149-152 1:154-284 1:154-284 @ ./src/views/modules/huodongbaoming/list.vue 2:0-55 10:2-8 3:0-50 3:0-50 @ ./src/router/router-static.js 20:1-65 91:13-27 @ ./src/main.js 10:0-47 84:2-8 ERROR in ./src/views/modules/huodongbaoming/list.vue Invalid value used as weak map key @ ./src/router/router-static.js 20:1-65 91:13-27 @ ./src/main.js 10:0-47 84:2-8 ERROR in ./src/views/modules/huodongleixing/add-or-update.vue Invalid value used as weak map key @ ./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/modules/huodongleixing/list.vue?vue&type=script&lang=js 94:1-43 135:3-14 @ ./src/views/modules/huodongleixing/list.vue?vue&type=script&lang=js 1:0-133 1:149-152 1:154-284 1:154-284 @ ./src/views/modules/huodongleixing/list.vue 2:0-55 10:2-8 3:0-50 3:0-50 @ ./src/router/router-static.js 27:1-65 126:13-27 @ ./src/main.js 10:0-47 84:2-8 ERROR in ./src/views/modules/huodongleixing/list.vue Invalid value used as weak map key @ ./src/router/router-static.js 27:1-65 126:13-27 @ ./src/main.js 10:0-47 84:2-8 ERROR in ./src/views/modules/news/add-or-update.vue Invalid value used as weak map key @ ./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/modules/news/list.vue?vue&type=script&lang=js 138:1-43 181:3-14 @ ./src/views/modules/news/list.vue?vue&type=script&lang=js 1:0-133 1:149-152 1:154-284 1:154-284 @ ./src/views/modules/news/list.vue 2:0-55 10:2-8 3:0-50 3:0-50 @ ./src/router/router-static.js 14:1-45 61:13-17 @ ./src/main.js 10:0-47 84:2-8 ERROR in ./src/views/modules/news/list.vue Invalid value used as weak map key @ ./src/router/router-static.js 14:1-45 61:13-17 @ ./src/main.js 10:0-47 84:2-8 ERROR in ./src/views/modules/newstype/add-or-update.vue Invalid value used as weak map key @ ./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/modules/newstype/list.vue?vue&type=script&lang=js 98:1-43 139:3-14 @ ./src/views/modules/newstype/list.vue?vue&type=script&lang=js 1:0-133 1:149-152 1:154-284 1:154-284 @ ./src/views/modules/newstype/list.vue 2:0-55 10:2-8 3:0-50 3:0-50 @ ./src/router/router-static.js 28:1-53 131:13-21 @ ./src/main.js 10:0-47 84:2-8 ERROR in ./src/views/modules/newstype/list.vue Invalid value used as weak map key @ ./src/router/router-static.js 28:1-53 131:13-21 @ ./src/main.js 10:0-47 84:2-8 ERROR in ./src/views/modules/yonghu/add-or-update.vue Invalid value used as weak map key @ ./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/modules/yonghu/list.vue?vue&type=script&lang=js 160:1-43 216:3-14 @ ./src/views/modules/yonghu/list.vue?vue&type=script&lang=js 1:0-133 1:149-152 1:154-284 1:154-284 @ ./src/views/modules/yonghu/list.vue 2:0-55 10:2-8 3:0-50 3:0-50 @ ./src/router/router-static.js 19:1-49 86:13-19 @ ./src/main.js 10:0-47 84:2-8 ERROR in ./src/views/modules/yonghu/list.vue Invalid value used as weak map key @ ./src/router/router-static.js 19:1-49 86:13-19 @ ./src/main.js 10:0-47 84:2-8 ERROR in ./src/views/pay.vue Invalid value used as weak map key @ ./src/router/router-static.js 11:0-29 50:13-16 @ ./src/main.js 10:0-47 84:2-8 ERROR in ./src/views/register.vue Invalid value used as weak map key @ ./src/router/router-static.js 12:0-39 144:13-21 @ ./src/main.js 10:0-47 84:2-8 ERROR in ./src/views/update-password.vue Invalid value used as weak map key @ ./src/router/router-static.js 10:0-52 45:13-27 @ ./src/main.js 10:0-47 84:2-8 webpack compiled with 147 errors
09-12
你遇到的错误信息如下: ``` Invalid value used as weak map key ``` 这个错误通常出现在 **Webpack 编译 Vue 单文件组件(SFC)**,表示某个模块尝试使用一个 **非对象**(如 `null`、`undefined`、字符串、数字等)作为 `WeakMap` 的 key,而 `WeakMap` 只接受对象作为 key。 --- ## 🔍 错误原因分析 ### 1. **Vue 组件导出不规范** 最常见的原因是某个 `.vue` 文件没有正确导出 `export default`,例如: ```js export default 'some string'; // ❌ 错误! ``` 或: ```js export default null; // ❌ 错误! ``` `export default` 必须是一个对象,如: ```js export default { name: 'MyComponent', data() { return {}; } } // ✅ 正确 ``` ### 2. **Vue Loader 版本不兼容** 如果你使用的是 Vue 2,但安装了 Vue 3 的 loader,或者版本不一致,也可能导致此错误。 ### 3. **Webpack 配置或插件问题** 某些 Webpack 插件或 loader 配置错误,也可能在处理 `.vue` 文件传入了错误的 key。 --- ## ✅ 解决方案 ### ✅ 1. 检查所有报错的 `.vue` 文件导出是否正确 请检查以下文件,确保它们都正确导出一个对象: - `src/views/modules/huodongbaoming/add-or-update.vue` - `src/views/modules/huodongbaoming/list.vue` - `src/views/modules/huodongleixing/add-or-update.vue` - `src/views/modules/huodongleixing/list.vue` - `src/views/modules/news/add-or-update.vue` - `src/views/modules/news/list.vue` - `src/views/modules/newstype/add-or-update.vue` - `src/views/modules/newstype/list.vue` - `src/views/modules/yonghu/add-or-update.vue` - `src/views/modules/yonghu/list.vue` - `src/views/pay.vue` - `src/views/register.vue` - `src/views/update-password.vue` **正确写法示例:** ```vue <script> export default { name: 'UpdatePassword', data() { return { password: '' }; }, methods: { onSubmit() { // ... } } }; </script> ``` **错误写法示例:** ```js export default 'hello'; // ❌ 错误! ``` --- ### ✅ 2. 确保 Vue 和 Vue Loader 版本匹配 #### 如果你使用的是 **Vue 2**,请确保安装了以下版本: ```json { "dependencies": { "vue": "^2.6.14" }, "devDependencies": { "vue-loader": "^15.10.1", "vue-template-compiler": "^2.6.14", "babel-loader": "^8.2.4", "@babel/core": "^7.20.2", "@babel/preset-env": "^7.20.2" } } ``` #### 如果你使用的是 **Vue 3**,请使用: ```json { "dependencies": { "vue": "^3.2.0" }, "devDependencies": { "vue-loader": "^17.0.1", "vue-template-compiler": "^3.2.0", "@vitejs/plugin-vue": "^4.0.0", "webpack": "^5.76.3" } } ``` **修复命令:** ```bash # 删除 node_modules 和 package-lock.json rm -rf node_modules package-lock.json # 清除缓存 npm cache clean --force # 安装对应版本的依赖(以 Vue 2 为例) npm install vue@2.6.14 --save npm install vue-loader@15.10.1 vue-template-compiler@2.6.14 --save-dev # 重新安装所有依赖 npm install ``` --- ### ✅ 3. 检查 Webpack 或 Babel 插件配置 如果你使用了自定义的 Webpack 配置,请确保没有错误地传入非对象作为 `WeakMap` 的 key。 例如: ```js const cache = new WeakMap(); cache.set('key', 'value'); // ❌ 错误:字符串不能作为 WeakMap 的 key ``` --- ## ✅ 总结修复流程 ```bash # 删除 node_modules 和 package-lock.json rm -rf node_modules package-lock.json # 清除缓存 npm cache clean --force # 安装 Vue 和 Vue Loader 对应版本(以 Vue 2 为例) npm install vue@2.6.14 --save npm install vue-loader@15.10.1 vue-template-compiler@2.6.14 --save-dev # 安装其他依赖 npm install # 启动项目 npm run serve ``` --- ##
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值