Vue-loader: incorrect peerDependencies for vue-template-compiler

[julienarticle]

The peer dependencies seems to be incorrectly define for the package vue-template comipler.

"peerDependencies": {
    "css-loader": "*",
    "vue-template-compiler": "^2.0.0"
  },
 "devDependencies": {
    ...
    "vue": "^2.1.0",
    "vue-template-compiler": "^2.1.0",
    "webpack": "^2.1.0-beta.27"
  }

This is causing following WARN on npm install.

julien:public article$ npm install
npm WARN [email protected] requires a peer of vue-template-compiler@^2.0.0 but none was installed.
npm WARN chameleon@ No repository field.
npm WARN chameleon@ No license field.
julien:public article$ 

[lizhiyao]

I encountered a similar problem：

In my package.json :

"devDependencies": {
   "vue-loader": "^10.0.2"
},
"dependencies": {
    "vue": "^2.1.8"
}

After npm i, When I run npm start:

ERROR in Cannot find module 'vue-template-compiler'
 @ ./src/routers/teamRouteConfig.js 35:22-58

---

My temporary solution:

npm i vue-template-compiler --save-dev

[yyx990803]

This is expected. npm3 doesn't install peer dependencies for you. You need to explicitly install it yourself / list it in your package.json.

[sunyang713]

why isn't vue-template-compiler automatically included with vue-loader? Shouldn't each dependency be a complete package, in that the developer would only install dependencies he understands and directly uses?

[yyx990803]

So that you can pin it to a specific version.

[sunyang713]

hmm, okay. So then would you ever use vue-template-compiler standalone? The docs only suggest to use vue-cli to install, so I didn't know I needed vue-template-compiler as well. Is it like vue-loader : babel-loader :: vue-template-compiler : babel-core ?

[yyx990803]

You don't use it directly. However, its version must be the same with vue to ensure correct behavior. Making it a peer dep makes it possible to explicitly pin both vue and vue-template-compiler to the same version.

[sunyang713]

If you'd never use it directly, it doesn't make sense to me to make it the user's responsibility to handle this funky, unexplained under-the-hood module (needing to pin the version or whatever). I think there must be some better way to include vue-template-compiler package underneath the vue package or vue-loader package, because those two packages are all the user needs to care about. Just like for babel, you only need to install babel-core, and if you use webpack, then babel-loader as well. we all want to keep our dependency lists clean and light.

Thanks for taking to time to respond to my comments. Let me know if I'm missing something or there's more that I just don't understand.

Edit: Would you ever use vue-loader _without_ the vue-template-compiler? If so, then yeah you're definitely right and I'm wrong. Otherwise, couldn't you put them together in some way, or have vue-template-compiler listed as a dependency instead of a peer dependency?

[yyx990803]

The only reason we are doing this is because there's simply no reliable way to pin a nested dependency, and pinning is a practical use case for some users.

Put it another way: making vue-template-compiler a nested dependency creates a problem that is much harder to solve for some users than having to install a peer dep. It's not about theoretical dependency logic or purity, it's a pragmatic tradeoff for minimal user frustration.

[seaneagan]

It took me about an hour to find this thread. Is it documented anywhere that one now needs to additionally install vue-template-compiler in order to use this package?

[mmdonaldson]

@yyx990803 I think this should be re opened and added to the documentation of vue-loader, this confused me getting started with vue also. Happy to add it if you like

[ghost]

Hi all,
I've received the same warning:
[email protected] requires a peer of vue-template-compiler@^2.0.0

while having only vue-loader version 10 installed as my dev-dependency. But still my project works fine in the browser, without errors etc.

Webpack.config.js

module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }

From vue-template-compiler npm site

vue-template-compiler can be used to pre-compile Vue 2.0 templates into render functions to avoid runtime-compilation overhead and CSP restrictions. You will only need it if you are writing build tools with very specific needs. In most cases you should be using vue-loader or vueify instead, both of which use this package internally.

[Shardj]

I've just run into this issue, I already have vue-template-compiler as a dependency so I'm not sure why this is happening

[Shardj]

Error message: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

Fixed for me: Go to the line where this error was thrown (node_modules/vue-loader/lib/index.js line 21) and uncomment the try catch so you can get the real error. For me I had a version mismatch between vue-loader and vue-template-compiler. To fix this I ran npm update. However you may have to change some version numbers in package.json if this doesn't fix the issue for you.

[timur-han]

Yes the same here:

           "vue": "2.5.17",
            "vue-loader": "15.4.2",
            "vue-server-renderer": "2.5.17",
            "vue-template-compiler": "2.5.16",
            "webpack": "4.18.0",

Errror that we get:

ERROR in ./Footer.vue
Module build failed (from ../node_modules/vue-loader/lib/index.js):
Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
    at loadTemplateCompiler (/home/b/dev/workspaces/a/node_modules/vue-loader/lib/index.js:21:11)
    at Object.module.exports (/home/b/dev/workspaces/a/node_modules/vue-loader/lib/index.js:65:35)

[sharkykh]

@timur-han you need to update vue-template-compiler to match vue's version - 2.5.17

[arivera12]

I just updated all my npm packages and webpack was all broken. I deleted all my node_modules folder and reinstall everything again and still didn't worked. @lizhiyao solution worked for me.

[oceangravity]

I just upgrade to the same version and _voilà_

 "vue": "^2.5.17",
 "vue-template-compiler": "^2.5.17",

[nainemom]

look at these packages:

• framevuerk (an UI framework based on vue, working with [email protected])
• framevuerk-builder (a package that include webpack@3 and etc to re-build framevuerk /dist folder on host package with custom config. note that i use shrinkwrap file to separating current dependencies from host dependencies)

in framevuerk-builder i need [email protected] and [email protected] to bundle .vue files into .js and .css file. (every things works fine here)

now, when i want to use framevuerk and framevuerk-builder in a package that include [email protected] and [email protected] and etc, franevuerk-builder breaks. the error still shown on console. now please tell me how can i fix this?

[ivanruslimcdohl]

this is because of
"vue" dependencies and "vue-template-compiler" had different suffix version, the suffix should be the same
for example:
if vue is
```"
vue": "^2.5.21"

then vue-template compiler should be

"vue-template-compiler": "^2.5.21"
```

hope this works for you

[abejordan]

this is because of
"vue" dependencies and "vue-template-compiler" had different suffix version, the suffix should be the same
for example:
if vue is

vue": "^2.5.21"

then vue-template compiler should be

"vue-template-compiler": "^2.5.21"

hope this works for you
@ivanrusli is correct.

[nainemom]

framevuerk-builder package not depends to vue! I just use [email protected] in framevuerk-builder to create my framework bundle in host package. Created bundle can work with vue >2.3. Now you think i want to use framevuerk-builder in a app that depends to vue and vue-template-compiler version 2.5.21. See this tree:

• Host App
• 
  
  • [email protected] (ok)
  
  
• 
  
  • [email protected] (ok)
  
  
• 
  
  • framevuerk-builder (ok)
  
  
• - - [email protected] (not ok!)
• 
  
  • etc... (ok)
  
  

[abejordan]

Hey @nainemom

Looks like you have vue-template-compiler added twice. I haven’t used framevuerk, but according to their website it doesn’t have any dependencies. So, if you would remove [email protected] you should be fine.

[nainemom]

framevuerk has not any dependency (it's just source of components plus generated bundle in /dist folder), but framevuerk-builder has (contain webpack, vue-template-compiler, babel, etc). so if you want to use framevuerk with custom config (colors, size, etc) you can install both of framevuerk and framevuerk-builder in your app and use framevuerk-builder to regenerate framevuerk /dist files.

[gbrits]

In my case I installed vue-template-compiler manually but that still didn't fix it, then I updated vue (npm install vue) and rebuilt the dependencies (npm rebuild) and then I was finally able to compile.

[fastfedora]

If vue-template-compiler needs to be installed separately, this really needs to be better documented.

The NPM page specifically says "You will only need it if you are writing build tools with very specific needs." And nowhere on the Vue Loader Getting Started page or the Vue Installation Guide makes any mention of this.

I understand the reasoning to have it as a peer dependency, but it needs to be documented in multiple places what's going on here, and how to fix it.

It would also be nice not only to reference that you need to install it yourself, but also that you need to upgrade vue-template-compiler whenever you upgrade vue itself. That's completely non-obvious, and an issue I only finally solved once I found this issue.

It's still unclear to me whether you need to keep vue-template-es2015-compiler in sync with vue and vue-template-compiler. So far it's looking like you don't, which is good since version 1.8.0 introduced a breaking change requiring a new polyfill.

[yyx990803]

The error messages you get when you did not install vue-template-compiler or when it has a wrong version tells you exactly what you need to do, so technically you should be able to figure it out even without the docs. That said to avoid further confusion it's been added to the docs: 9beed01