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 vue@2.6.12 i had to also install the vue-template-compiler@2.6.12 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 ecmascript@0.15.1 is not satisfied by ecmascript 0.14.4. Constraints on package "ecmascript":

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

Conflict: Constraint caching-html-compiler@1.2.1 is not satisfied by caching-html-compiler 1.2.0. Constraints on package "caching-html-compiler":

• caching-html-compiler@1.2.1 <- static-html 1.3.2

Conflict: Constraint templating-tools@1.2.1 is not satisfied by templating-tools 1.2.0. Constraints on package "templating-tools":

• templating-tools@1.2.1 <- static-html 1.3.2
• templating-tools@1.2.0 <- 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 Githubissues.

Githubissues is a development platform for aggregating issues.