laravel - Laravel mix 在 mix v4+ 中总是未定义
问题描述
升级到 Mix v4.x 后的任何调用都会npm run
导致 mix 未定义。我在每次运行时都会看到这样的错误:
> npm run development
> @ development /project
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
/project/node_modules/webpack-cli/bin/cli.js:235
throw err;
^
TypeError: Cannot read property 'js' of undefined
at Object.<anonymous> (/project/webpack.mix.js:15:5)
at Module._compile (/project/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Module.require (internal/modules/cjs/loader.js:657:17)
at require (/project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object.<anonymous> (/project/node_modules/laravel-mix/setup/webpack.config.js:12:1)
at Module._compile (/project/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Module.require (internal/modules/cjs/loader.js:657:17)
at require (/project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (/project/node_modules/webpack-cli/bin/convert-argv.js:113:13)
at requireConfig (/project/node_modules/webpack-cli/bin/convert-argv.js:115:6)
at /project/node_modules/webpack-cli/bin/convert-argv.js:122:17
at Array.forEach (<anonymous>)
at module.exports (/project/node_modules/webpack-cli/bin/convert-argv.js:120:15)
at yargs.parse (/project/node_modules/webpack-cli/bin/cli.js:232:39)
at Object.parse (/project/node_modules/yargs/yargs.js:567:18)
at /project/node_modules/webpack-cli/bin/cli.js:210:8
at Object.<anonymous> (/project/node_modules/webpack-cli/bin/cli.js:500:3)
at Module._compile (internal/modules/cjs/loader.js:721:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Module.require (internal/modules/cjs/loader.js:657:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.<anonymous> (/project/node_modules/webpack/bin/webpack.js:155:2)
at Module._compile (internal/modules/cjs/loader.js:721:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
我正在使用 Laravel 5.5 运行它。我升级package.json
以匹配与 mix v4 一起使用的 laravel 存储库中的版本。
这是我的package.json
:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"accounting": "^0.4.1",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"bootstrap-sass": "^3.4.0",
"cross-env": "^5.2.0",
"fancybox": "^3.0.1",
"jquery": "^3.3.1",
"jquery-slimscroll": "^1.3.8",
"ladda": "^2.0.1",
"laravel-mix": "^4.0.13",
"locutus": "^2.0.10",
"metismenu": "^2.7.9",
"moment": "^2.23.0",
"vue": "^2.5.21",
"webpack": "^4.28.3",
"webpack-cli": "^3.2.0"
},
"dependencies": {
"ajv": "^6.6.2",
"bootstrap-vue": "^2.0.0-rc.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"imagemin": "^6.0.0",
"jsonexport": "^2.4.1",
"laravel-echo": "^1.5.2",
"lodash": "^4.17.11",
"node-sass": "^4.11.0",
"pusher-js": "^4.3.1",
"sweetalert2": "^7.32.4",
"vue-api-query": "^1.2.0",
"vue-events": "^3.1.0",
"vue-multiselect": "^2.1.3",
"vue-sweetalert2": "^1.6.3",
"vuetable-2": "^2.0.0-beta.4",
"vuex": "^3.0.1"
}
}
我的webpack.mix.js
:
const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version()
.sourceMaps();
我已经尝试过删除node_modules
,yarn install
但并没有解决它。
如果我降级到 v3,除了编译一些 SASS 的问题之外没有其他问题。
- npm v6.4.1
- 节点 v11.5.0
- 纱线 v1.12.3
解决方案
如果没有看到您的webpack.mix.js
文件,很难说出问题所在。我克隆了 Laravel 5.5 分支并升级到版本并成功运行了^4.0.13
和,尽管我使用的是更新版本的 npm 和节点。laravel-mix
yarn dev
yarn prod
- NPM 6.5.0-next.0
- 节点 11.6.0
- 纱线 1.12.3
这是一个用于演示的GitHub 存储库。
更新
// TypeError: Cannot read property 'js' of undefined
const { mix } = require('laravel-mix');
// works
const mix = require('laravel-mix');
推荐阅读
- autodesk-forge - 关闭剖面线填充
- c# - EF Core 中必需到可选关系(一对零或一)的最佳方法是什么?
- android - 如何使用反应原生视频从内部存储访问我的视频?
- c# - 如何在 Blazor 中使用 Virtualize 组件实现分组(可扩展组)?
- c - 确定C语言中的最大非整数
- c - 当 pthread 和虚函数被开发时,如何跟踪 riscv 指令的跳转?
- javascript - [Vue 警告]:检测到重复键:x。这可能会导致更新错误。如何防止添加已经通过方法添加的项目
- r - 滚动平均值,dbplyr 中的标准偏差
- video - 以 ffmpeg -i %04d.png 模式重复图像
- oracle - oracle 在列名前后更改符号