Laravel-mix: Mix loops installing additional dependencies for vue()

[DSpeichert]

• Laravel Mix Version: 6.0.0 (npm list --depth=0)
• Node Version (node -v): v15.4.0
• NPM Version (npm -v):6.14.8
• OS: Arch Linux

Description:

When adding .vue() in webpack.mix.js to enable Vue processing, laravel-mix loops attempting to install "additional dependencies"

[laravel@archlinux10 bug-repro]$ npm run prod

> @ prod /home/laravel/bug-repro
> npm run production


> @ production /home/laravel/bug-repro
> mix --production

        Additional dependencies must be installed. This will only take a moment.

        Running: npm install vue-template-compiler vue-loader@^15.9.5 --save-dev --legacy-peer-deps

        Okay, done. The following packages have been installed and saved to your package.json dependencies list:

        - vue-template-compiler

        - vue-loader@^15.9.5

        Finished. Please run Mix again.

[laravel@archlinux10 bug-repro]$ npm run prod

> @ prod /home/laravel/bug-repro
> npm run production


> @ production /home/laravel/bug-repro
> mix --production

        Additional dependencies must be installed. This will only take a moment.

        Running: npm install vue-template-compiler vue-loader@^15.9.5 --save-dev --legacy-peer-deps

        Okay, done. The following packages have been installed and saved to your package.json dependencies list:

        - vue-template-compiler

        - vue-loader@^15.9.5

        Finished. Please run Mix again.

[laravel@archlinux10 bug-repro]$ npm run prod

> @ prod /home/laravel/bug-repro
> npm run production


> @ production /home/laravel/bug-repro
> mix --production

        Additional dependencies must be installed. This will only take a moment.

        Running: npm install vue-template-compiler vue-loader@^15.9.5 --save-dev --legacy-peer-deps

        Okay, done. The following packages have been installed and saved to your package.json dependencies list:

        - vue-template-compiler

        - vue-loader@^15.9.5

        Finished. Please run Mix again.

Steps To Reproduce:

mix.js('resources/js/app.js', 'public/js')
+.vue()
.extract()
.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

Repo to reproduce: https://github.com/DSpeichert/bug-repro/tree/mix-loop

Actually running npm install vue-template-compiler vue-loader@^15.9.5 --save-dev --legacy-peer-deps manually fixes the loop.

[JeffreyWay]

I just tested your repo on a Mac, and everything worked correctly. Can anyone else confirm that this fails on Windows or Linux?

[peterthomson]

Yep. Just loops the same "Success" message:

Additional dependencies must be installed. This will only take a moment.
Running: npm install vue-loader@^15.9.5 --save-dev --legacy-peer-deps
Okay, done. The following packages have been installed and saved to your package.json dependencies list:
- vue-loader@^15.9.5
Finished. Please run Mix again.

[Krisell]

Same problem here, on macOS 11.1 and npm 6.14.10, but fixed by manually running the dependency installation.

[Krisell]

I tested with the reproduction repo by @DSpeichert and I can confirm the issue also for macOS 11.1 and npm 6.14.10

Note that the vue-loader and vue-template-compiler dependencies have been commited by mistake by @DSpeichert so to actually reproduce the issue, those must be removed first.

[DSpeichert]

Indeed, I've fixed my reproduction repository to remove the accidentally committed packages that @Krisell pointed out.

[thecrypticace]

So I can't exactly reproduce this but I have discovered a possibly related problem. Running mix with the production flags causes npm install to run with NODE_ENV=production which removes all dev dependencies.

Do you run into this if you just do npm run dev (no production flag)? Or npx mix?

[Krisell]

@thecrypticace I think that is indeed the problem. It works correctly when running npx mix (see image below), but when running npm run production, the additional dependencies are added to the package.json and package-lock.json files but no actual installation of these dependencies take place and they do not appear in node_modules.

Whereas running npm run production instead:

[peterthomson]

It's not a great solution and I'm sure the core team will come up with a better fix. But if anyone just wants to get their site working again, I found that locking Vue Loader to the exact version mentioned in the error message fixed the problem. The old line (which the error implies is correct was) "vue-loader": "^15.9.5" which actually installed 15.9.6. The new line that works in real life is: "vue-loader": "15.9.5"