Vue 2 is not working with Meteor 2.12

[Grubba27]

To reproduce:

meteor create vue-test --vue-2

meteor

Gives a big error but the summary of the error is this text below:

[vue-component] Error while compiling in tag <script> using lang js: Can't find handler for lang 'js', did you install it?
[vue-component] Error while compiling in tag <script> using lang js TemplatingTools is not defined
ReferenceError: TemplatingTools is not defined
    at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
    at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:87:13)
    at compileTags (packages/vue-component/plugin/vue-compiler.js:534:18)

As I was looking in the source code I found a snippet in packages/vue-component/plugin/tag-handler.js that does look like this:

const compile = global.vue.lang[lang] // maybe here is breaking?
if (!compile) {
/// error

tried in 0.16.0 and 0.15.3, and both break. Maybe it is unrelated to the vue-components package, but I'm unsure how to look into this.

[bslocombe]

@Grubba27 we found this issue too, and on updating one of our projects.

the issue seems to be this line that was added recently to the tag handler:

if (sfcBlock.type === 'script' && !sfcBlock.lang) {
sfcBlock.lang = 'js'
}

Which then forces the builder to look for compiler with options for JS vs just skipping the whole block and using babel to transpile the JS.

If you copy the vue-component package to your local packages and uncomment this line it should start working again.

You also need to make sure you have a version of vue-template-compiler that matches your vue version installed from npm too, otherwise it will complain that the version your using doesn't match (silently if you dont have the compiler debug on). since we are using [email protected] i had to also install the [email protected] to make things work properly.

[bslocombe]

Not sure if thats the best way to handle the issue, but submitted a PR for the workaround that works for me.

[eganpg]

Thank you. I've updated our project last night an am experiencing the same issue. Appreciate the work around.

[eganpg]

Adding follow up. It appears there is a difference between the atmosphere package and the latest repo.

1. Create folder /packages
2. Copy https://github.com/meteor-vue/vue-meteor/tree/master/packages/vue-component into step 1 folder
3. Remove akryum:vue-component package

This solved the issue for us in multiple apps

[willibeach]

Meteor no longer supports Vue 2. We reset the entire development environment and then installed earlier versions of meteor (v.1.12.2 and then v 2.10.0). We even used meteor to create an entirely new project using the default scaffolding and that fails too. All this suggests something fundamental is wrong with the Vue-2 support for Meteor.

Here is the CLI list of procedures we followed:-

1. meteor-installer uninstall (remove meteor entirely)
2. npm install -g meteor
3. meteor create --vue-2 testApp
4. cd testApp (change directory to the testApp folder)
5. meteor install --release 1.12.2 (our original app was using release 1.x.x)
6. meteor (command to build & run the app)

We have made no changes to the testApp code - it is exactly the code created by the meteor scaffolder. When we run the meteor command to build & test the default App we get the following messages, which indicate that meteor no longer supports a Vue 2 application on an older (1.x.x) release.

**=> Errors while initializing project:

While selecting package versions:
error: Conflict: Constraint [email protected] is not satisfied by ecmascript 0.14.4.
Constraints on package "ecmascript":

• [email protected] <- top level
• ecmascript@~0.14.4 <- top level
• [email protected] <- webapp 1.9.1 <- akryum:vue-component-dev-server 0.1.4 <- akryum:vue-component 0.16.0
• [email protected] <- webapp 1.9.1 <- meteor-base 1.4.0
• [email protected] <- logging 1.1.20 <- webapp 1.9.1 <- akryum:vue-component-dev-server 0.1.4 <-
  akryum:vue-component 0.16.0
• [email protected] <- logging 1.1.20 <- webapp 1.9.1 <- meteor-base 1.4.0
• [email protected] <- ejson 1.1.1 <- allow-deny 1.1.0 <- mongo 1.10.1
• [email protected] <- ejson 1.1.1 <- mongo 1.10.1
• [email protected] <- base64 1.0.12 <- ejson 1.1.1 <- allow-deny 1.1.0 <- mongo 1.10.1
• [email protected] <- base64 1.0.12 <- ejson 1.1.1 <- mongo 1.10.1
• [email protected] <- routepolicy 1.1.0 <- ddp-server 2.3.2 <- ddp 1.4.0 <- allow-deny 1.1.0 <- mongo 1.10.1
• [email protected] <- routepolicy 1.1.0 <- ddp-server 2.3.2 <- ddp 1.4.0 <- meteor-base 1.4.0
• [email protected] <- routepolicy 1.1.0 <- webapp 1.9.1 <- meteor-base 1.4.0
• [email protected] <- boilerplate-generator 1.7.1 <- webapp 1.9.1 <- akryum:vue-component-dev-server 0.1.4 <-
  akryum:vue-component 0.16.0
• [email protected] <- boilerplate-generator 1.7.1 <- webapp 1.9.1 <- meteor-base 1.4.0
• [email protected] <- webapp-hashing 1.0.9 <- webapp 1.9.1 <- akryum:vue-component-dev-server 0.1.4 <-
  akryum:vue-component 0.16.0
• [email protected] <- webapp-hashing 1.0.9 <- webapp 1.9.1 <- meteor-base 1.4.0
• [email protected] <- ddp-client 2.3.3 <- ddp 1.4.0 <- allow-deny 1.1.0 <- mongo 1.10.1
• [email protected] <- ddp-client 2.3.3 <- ddp 1.4.0 <- meteor-base 1.4.0
• [email protected] <- check 1.3.1 <- allow-deny 1.1.0 <- mongo 1.10.1
• [email protected] <- check 1.3.1 <- johanbrook:publication-collector 1.1.0
• [email protected] <- random 1.2.0 <- caching-compiler 1.2.2 <- akryum:vue-component 0.16.0
• [email protected] <- random 1.2.0 <- mongo 1.10.1
• [email protected] <- tracker 1.2.0
• [email protected] <- retry 1.1.0 <- autoupdate 1.6.0 <- akryum:vue-component-dev-client 0.4.7 <-
  akryum:vue-component 0.16.0
• [email protected] <- id-map 1.1.0 <- binary-heap 1.0.11 <- mongo 1.10.1
• [email protected] <- callback-hook 1.3.0 <- ddp-client 2.3.3 <- ddp 1.4.0 <- allow-deny 1.1.0 <- mongo 1.10.1
• [email protected] <- callback-hook 1.3.0 <- ddp-client 2.3.3 <- ddp 1.4.0 <- meteor-base 1.4.0
• [email protected] <- callback-hook 1.3.0 <- mongo 1.10.1
• [email protected] <- ddp-common 1.4.0 <- ddp-client 2.3.3 <- ddp 1.4.0 <- allow-deny 1.1.0 <- mongo 1.10.1
• [email protected] <- ddp-common 1.4.0 <- ddp-client 2.3.3 <- ddp 1.4.0 <- meteor-base 1.4.0
• [email protected] <- reload 1.3.1 <- akryum:vue-component-dev-client 0.4.7 <- akryum:vue-component 0.16.0
• [email protected] <- socket-stream-client 0.3.1 <- ddp-client 2.3.3 <- ddp 1.4.0 <- allow-deny 1.1.0 <- mongo
  1.10.1
• [email protected] <- socket-stream-client 0.3.1 <- ddp-client 2.3.3 <- ddp 1.4.0 <- meteor-base 1.4.0
• [email protected] <- diff-sequence 1.1.1 <- ddp-client 2.3.3 <- ddp 1.4.0 <- allow-deny 1.1.0 <- mongo 1.10.1
• [email protected] <- diff-sequence 1.1.1 <- ddp-client 2.3.3 <- ddp 1.4.0 <- meteor-base 1.4.0
• [email protected] <- diff-sequence 1.1.1 <- minimongo 1.6.1 <- mongo 1.10.1
• [email protected] <- diff-sequence 1.1.1 <- mongo 1.10.1
• [email protected] <- mongo-id 1.0.7 <- ddp-client 2.3.3 <- ddp 1.4.0 <- allow-deny 1.1.0 <- mongo 1.10.1
• [email protected] <- mongo-id 1.0.7 <- ddp-client 2.3.3 <- ddp 1.4.0 <- meteor-base 1.4.0
• [email protected] <- mongo-id 1.0.7 <- minimongo 1.6.1 <- mongo 1.10.1
• [email protected] <- mongo-id 1.0.7 <- mongo 1.10.1
• [email protected] <- ddp-server 2.3.2 <- ddp 1.4.0 <- allow-deny 1.1.0 <- mongo 1.10.1
• [email protected] <- ddp-server 2.3.2 <- ddp 1.4.0 <- meteor-base 1.4.0
• [email protected] <- autoupdate 1.6.0 <- akryum:vue-component-dev-client 0.4.7 <- akryum:vue-component 0.16.0
• [email protected] <- mongo 1.10.1
• [email protected] <- allow-deny 1.1.0 <- mongo 1.10.1
• [email protected] <- minimongo 1.6.1 <- allow-deny 1.1.0 <- mongo 1.10.1
• [email protected] <- minimongo 1.6.1 <- mongo 1.10.1
• [email protected] <- ordered-dict 1.1.0 <- minimongo 1.6.1 <- allow-deny 1.1.0 <- mongo 1.10.1
• [email protected] <- ordered-dict 1.1.0 <- minimongo 1.6.1 <- mongo 1.10.1
• [email protected] <- mongo-decimal 0.1.2 <- minimongo 1.6.1 <- allow-deny 1.1.0 <- mongo 1.10.1
• [email protected] <- mongo-decimal 0.1.2 <- minimongo 1.6.1 <- mongo 1.10.1
• [email protected] <- mongo-decimal 0.1.2 <- mongo 1.10.1
• [email protected] <- binary-heap 1.0.11 <- mongo 1.10.1
• [email protected] <- standard-minifier-css 1.7.1
• [email protected] <- minifier-css 1.5.3 <- standard-minifier-css 1.7.1
• [email protected] <- standard-minifier-js 2.6.0
• [email protected] <- shell-server 0.5.0
• [email protected] <- static-html 1.3.2
• [email protected] <- caching-html-compiler 1.2.0 <- static-html 1.3.2
• [email protected] <- caching-compiler 1.2.2 <- akryum:vue-component 0.16.0
• [email protected] <- templating-tools 1.2.0 <- caching-html-compiler 1.2.0 <- static-html 1.3.2
• [email protected] <- templating-tools 1.2.0 <- static-html 1.3.2
• [email protected] <- spacebars-compiler 1.2.1 <- templating-tools 1.2.0 <- caching-html-compiler 1.2.0 <-
  static-html 1.3.2
• [email protected] <- spacebars-compiler 1.2.1 <- templating-tools 1.2.0 <- static-html 1.3.2
• [email protected] <- htmljs 1.1.0 <- blaze-tools 1.1.1 <- spacebars-compiler 1.2.1 <- templating-tools 1.2.0 <-
  caching-html-compiler 1.2.0 <- static-html 1.3.2
• [email protected] <- htmljs 1.1.0 <- blaze-tools 1.1.1 <- spacebars-compiler 1.2.1 <- templating-tools 1.2.0 <-
  static-html 1.3.2
• [email protected] <- htmljs 1.1.0 <- spacebars-compiler 1.2.1 <- templating-tools 1.2.0 <- static-html 1.3.2
• [email protected] <- html-tools 1.1.1 <- spacebars-compiler 1.2.1 <- templating-tools 1.2.0 <-
  caching-html-compiler 1.2.0 <- static-html 1.3.2
• [email protected] <- html-tools 1.1.1 <- spacebars-compiler 1.2.1 <- templating-tools 1.2.0 <- static-html 1.3.2
• [email protected] <- blaze-tools 1.1.1 <- spacebars-compiler 1.2.1 <- templating-tools 1.2.0 <-
  caching-html-compiler 1.2.0 <- static-html 1.3.2
• [email protected] <- blaze-tools 1.1.1 <- spacebars-compiler 1.2.1 <- templating-tools 1.2.0 <- static-html
  1.3.2
• [email protected] <- akryum:vue-component 0.16.0
• [email protected] <- akryum:vue-component-dev-client 0.4.7 <- akryum:vue-component 0.16.0
• [email protected] <- akryum:vue-component-dev-server 0.1.4 <- akryum:vue-component 0.16.0
• [email protected] <- meteortesting:mocha 2.0.1
• [email protected] <- meteortesting:browser-tests 1.3.4 <- meteortesting:mocha 2.0.1
• [email protected] <- meteortesting:mocha-core 8.0.1 <- meteortesting:mocha 2.0.1
• [email protected] <- johanbrook:publication-collector 1.1.0

Conflict: Constraint [email protected] is not satisfied by caching-html-compiler 1.2.0.
Constraints on package "caching-html-compiler":

• [email protected] <- static-html 1.3.2

Conflict: Constraint [email protected] is not satisfied by templating-tools 1.2.0.
Constraints on package "templating-tools":

• [email protected] <- static-html 1.3.2
• [email protected] <- caching-html-compiler 1.2.0 <- static-html 1.3.2**

We then decided to install meteor version 2.10.0, which is slightly older than the latest release, by running the command:

meteor install --release 2.10.0

When the meteor command is run it now produces the following Error messages, which are exactly the same error messages we get when attempted to build & run our original app which has failed ever since we upgraded Meteor and we're now unable to revert to an earlier version. All this suggests that we can't even run a vue 2 app using an older release, whether versions 1.12.2 or 2.10.0 :-

=> Started proxy.
=> [HMR] Dev server listening on port 3003.
[vue-component] Error while compiling in tag <script> using lang js: Can't find handler for lang 'js', did you install it?
[vue-component] Error while compiling in tag <script> using lang js TemplatingTools is not defined
ReferenceError: TemplatingTools is not defined
at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:87:13)
at compileTags (packages/vue-component/plugin/vue-compiler.js:534:18)
at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:543:12)
at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:142:12)
at packages/vue-component/plugin/vue-compiler.js:58:34
at C:\Users\William\AppData\Local.meteor\packages\akryum_vue-component\0.16.0\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
at replenish (C:\Users\William\AppData\Local.meteor\packages\akryum_vue-component\0.16.0\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
at C:\Users\William\AppData\Local.meteor\packages\akryum_vue-component\0.16.0\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
at Object.eachLimit$1 (C:\Users\William\AppData\Local.meteor\packages\akryum_vue-component\0.16.0\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
at packages/vue-component/plugin/vue-compiler.js:42:11
at C:\Users\William\AppData\Local.meteor\packages\meteor-tool\2.12.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\meteor-promise\fiber_pool.js:43:40
[vue-component] Error while compiling in tag <script> using lang js: Can't find handler for lang 'js', did you install it?
[vue-component] Error while compiling in tag <script> using lang js TemplatingTools is not defined
ReferenceError: TemplatingTools is not defined
at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:87:13)
at compileTags (packages/vue-component/plugin/vue-compiler.js:534:18)
at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:543:12)
at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:142:12)
at packages/vue-component/plugin/vue-compiler.js:58:34
at C:\Users\William\AppData\Local.meteor\packages\akryum_vue-component\0.16.0\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
at replenish (C:\Users\William\AppData\Local.meteor\packages\akryum_vue-component\0.16.0\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
at C:\Users\William\AppData\Local.meteor\packages\akryum_vue-component\0.16.0\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
at Object.eachLimit$1 (C:\Users\William\AppData\Local.meteor\packages\akryum_vue-component\0.16.0\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
at packages/vue-component/plugin/vue-compiler.js:42:11
at C:\Users\William\AppData\Local.meteor\packages\meteor-tool\2.12.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\meteor-promise\fiber_pool.js:43:40
[vue-component] Error while compiling in tag <script> using lang js: Can't find handler for lang 'js', did you install it?
[vue-component] Error while compiling in tag <script> using lang js TemplatingTools is not defined
ReferenceError: TemplatingTools is not defined
at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:87:13)
at compileTags (packages/vue-component/plugin/vue-compiler.js:534:18)
at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:543:12)
at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:142:12)
at packages/vue-component/plugin/vue-compiler.js:58:34
at C:\Users\William\AppData\Local.meteor\packages\akryum_vue-component\0.16.0\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
at replenish (C:\Users\William\AppData\Local.meteor\packages\akryum_vue-component\0.16.0\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
at C:\Users\William\AppData\Local.meteor\packages\akryum_vue-component\0.16.0\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
at Object.eachLimit$1 (C:\Users\William\AppData\Local.meteor\packages\akryum_vue-component\0.16.0\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
at packages/vue-component/plugin/vue-compiler.js:42:11
at C:\Users\William\AppData\Local.meteor\packages\meteor-tool\2.12.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\meteor-promise\fiber_pool.js:43:40
=> Started MongoDB.

So if the above isn't a clear enough statement of the problems we're facing, and I suspect others invested in Meteor and Vue are too, then I don't know what is. All the above is using the default scaffolded app generated by meteor create --vue-2 testApp. Worst still, it appears one can't go back to an earlier release. As you can see above, we've tried running the default app with meteor 1.12.2 and 2.10.0.

This is a serious situation, especially for those invested in Metoer with Vue and a resolution to the problems needs immediate attention.

[willibeach]

Adding follow up. It appears there is a difference between the atmosphere package and the latest repo.

1. Create folder /packages
2. Copy https://github.com/meteor-vue/vue-meteor/tree/master/packages/vue-component into step 1 folder
3. Remove akryum:vue-component package

This solved the issue for us in multiple apps

Can you elaborate how to fix the problem.

1. We created a new folder called \packages in our Application directory which already has folders such as .meteor, \client, \imports, \node_modules, \server and \test
2. We then changed to the packages folder i.e. cd packages
3. We than ran git clone 'https://github.com/meteor-vue/vue-meteor.git', which created the folder \vue-meteor inside the packages folder.
4. Then removed the akryum-vue-component folder from the global meteor installation which in our case is in directory User\William\AppData\Local.meteor\packages.

When we run meteor to build & run the app, meteor appears to first reinstall the missing vue-component package and reports the same error messages. Can you suggest what we've done wrong please?

[constantin-huetterer]

Can you elaborate how to fix the problem.

I think what he means in step 3. is to remove (or comment out) the akryum:vue-component from the packages file in the .meteor folder of your project.

[StrictlySkyler]

I'm blocked from upgrading pending this as well. @Akryum Are you able to update this or not? Looks like there's a potential fix proposed.

Thanks,