UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'length' of undefined on Laravel Mix with vuetify-loader答案

【问题标题】：UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'length' of undefined on Laravel Mix with vuetify-loaderUnhandledPromiseRejectionWarning: TypeError: Cannot read property 'length' of undefined on Laravel Mix with vuetify-loader
【发布时间】：2020-03-11 13:59:52
【问题描述】：

我正在使用 Laravel 5.6，我需要在 Vue 项目中实现 Vuetify。我还需要 vuetify-loader，否则我需要手动导入每个 Vuetify 组件。

我在webpack.mix.js 文件中使用的代码如下：

mix
    .js('resources/assets/app.js', 'public/js/app.js')
    .sass('resources/assets/app.scss', 'public/css/app.css')
    .webpackConfig({
        plugins: [
            new VuetifyLoaderPlugin()
        ]
    })
    .version();

不幸的是，每次我尝试使用 npm run dev 进行编译时，都会出现以下错误： UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'length' of undefined

【问题讨论】：

标签： vue.js vuetify.js laravel-mix

【解决方案1】：

问题出在 vuetify-loader 源代码中，在 loader.js 的第 21 行：

path: this.resourcePath.substring(this.rootContext.length + 1),

https://github.com/vuetifyjs/vuetify-loader/blob/v1.4.3/lib/loader.js

vuetify-loader 尝试读取 this.rootContext 的长度。我在网上快速搜索了一下，发现on the webpack documentation，rootContext 是 Webpack 4 的一个属性。

所以我检查了我的 webpack 版本，发现 Laravel 5.6 默认没有使用 Webpack v4。

TL;DR;

您所要做的就是通过这样做将您的 webpack 版本升级到 Webpack 4：

npm remove laravel-mix
npm install laravel-mix@^4.0.0 --save-dev

【讨论】：