UnhandledPromiseRejectionWarning: TypeError: Невозможно прочитать свойство 'length' с неопределенным значением в Laravel Смешать с vuetify-loader

Question

Я использую Laravel 5.6 и мне нужно реализовать Vuetify в Vue проекте. Мне также нужен 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

Answer 1

Проблема была в исходном коде загрузчика vuetify, в строке 21 загрузчика. js:

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. Я сделал быстрый поиск в Интернете и обнаружил в документации веб-пакета , что rootContext является собственностью Webpack 4.

Итак, я проверил свою версию веб-пакета и обнаружил, что Laravel 5.6 по умолчанию не использует Webpack v4.

TL; DR;

Все, что вам нужно сделать, это обновить версию Webpack до Webpack 4, выполнив следующие действия:

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