Laravel-mix: vue-template-compiler installed despite no reference to Vue

[Log1x]

• Laravel Mix Version: [email protected]
• Node Version (node -v): v11.4.0
• NPM Version (npm -v): 6.4.1
• OS: macOS 10.13.6

Description:

I suspect starting in 4.0.10 with the introduction to this commit, vue-template-compiler appears to be installing despite the project not using Vue nor having any reference to it whatsoever.

[JeffreyWay]

vue-template-compiler has always been included with Mix. You're just seeing it more directly now. mix.js() does assume a Vue application, even if it's not required.

[billriess]

@JeffreyWay

Why does mix.react() also assume a Vue application though?

[mabasic]

I do not want to have vue-template-compiler dependency in my package.json file. Can it not be forced to install?

[Kovah]

I would like to see an option to turn this off. In #1891 @JeffreyWay mentioned that Laravel Mix was build with Vue in mind but the current documentation indicates that it's more a universal build tool to make configuration with Webpack easier. Getting vue-template-compiler _force installed_ via Yarn even if I do not use any Vue and not using Yarn is irritating especially for starters.

If there is an option to turn this off or properly configure it, I would be pleased to get to know it. :)

[othneildrew]

A quick fix that I found that was especially helpful for me was to use the mix.scripts method. This assumes an array of files to combine and does not install any vue dependencies.

webpack.mix.js looks like this:

mix.scripts(['resources/js/app.js'], 'public/js/app.js')
   .sass('resources/sass/app.scss', 'public/css');

If you're writing ES6+ JS like I am you can also use the mix.babel() which works actually the same but will use plugins like babel-loader to transform ES6+ code.

Hope this helps :smile:

[paullaffitte]

Unfortunately, if you want to use the import keyword, you need modules and you need webpack, so you need to use the .js function.
I did a PR as mentionned above, but if it's not merge soon, you can use this hack (I checked the code of the library. If you're not using vue, it should not cause any issue, if you're using vue why are you reading this issue first?)

The code below should go inside a new file webpack.config.js and your package.json file should be updated as explained here under the Custom Configuration Files title. You should copy the content of the original webpack.config.js and replace the line:10 (new ComponentFactory().installAll();) by the following:

new class extends ComponentFactory {
  install(Component) {
    super.install(class extends require('laravel-mix/src/components/' + Component.name) {
      dependencies() {
        return ((super.dependencies ? super.dependencies() : null) || [])
          .filter(dependency => dependency != 'vue-template-compiler');
      }
    });
  }
}().installAll();

It's not very pretty but at least it works, at least for laravel-mix:4.0.7. It's just ignoring the 'vue-template-compiler' dependency required by the JavaScript component (that is based on the Vue one), and which is the only current dependency of this components.

EDIT: For some reason you cannot use mix.extend('js', new JS()); or it will yield an undefined.js file under some circumstances (if you use sass compilation for instance) and it's seems hard to replace a component, that's why you need to have a custom configuration file. I got to this solution after several edits more or less good, but this looks to be the only fully working solution. Again it's just a hack until my PR can be closed and merged.

EDIT 2: For the more paranoïd people, if you want to be sure to get your webpack.config.js up to date:

const laravelMixVersion = require('./package-lock.json').dependencies['laravel-mix'].version;
const targetVersion = '4.1.4'; // Replace by your current version
if (laravelMixVersion !== targetVersion) {
  throw new Error(`Please update your webpack.config.js accordingly to the new version of laravel-mix (https://laravel.com/docs/5.8/mix#custom-webpack-configuration). Current: ${laravelMixVersion}, target: ${targetVersion}`);
}

[dendihandian]

Laravel-Mix is great, That's why I used it for another non-laravel project. But my non-laravel project doesn't need Vue, how to disable this when running npm run dev or yarn dev?

[paullaffitte]

@dendihandian Normally it should have been removed in version 6 as this comment shows https://github.com/JeffreyWay/laravel-mix/pull/2339#issuecomment-700261567. So try to upgrade your version, otherwise you could try the hack given by the comment just before yours (working on version 4, can't say about other versions)

EDIT : It has been remove in version 6, not 5. My bad.

[dendihandian]

@paullaffitte I think it still there.
Now I'm using a new laravel scaffolding with "laravel-mix": "^5.0.1" inside the package.json and the npm run dev still installing vue-template-compiler. I believe I'm not the only one experiencing this now.

[bjornbjorn]

Yeah, looks like this still is the case with "laravel-mix": "^5.0.1" .. the first time you run yarn install it will add vue-template-compiler.

[paullaffitte]

Sorry I meant version 6 actually, I just edited my answer.

PS : Version 6 is currently in beta :confused: