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 <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,

[anderson-2wav]

I have big investments in several meteor 2 / vue 2 applications that will be back-breaking to update to Meteor 3.

I gathered from the last comments from @jbl2024 that meteor 2.13.3 might fix the issue. I can confirm that a new meteor 2 vue 2 app created with 2.13.3 will launch without these errors. Yay.
meteor create --vue --release 2.13.3 meteor-vue-2 cd meteor-vue-2 meteor npm i meteor

Now how to update an existing app? In the existing app:
meteor update --release 2.13.3 updates a bunch of stuff, but running still has the error:
"TypeError: this._watchers is undefined"

In meteor-vue/vue-meteor-tracker#75, @Akryum says to stick to vue 2.6, but this app uses vue 2.6.14 (and has for long time). Thinking that akryum:vue-component may not have gotten updated with the update to 2.13.3, I tried meteor remove akryum:vue-component and meteor add akryum:vue-component. That changed something because now when I run the app I get this on the server:
[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

I tried the recipe suggested by @eganpg above (installing a local copy of GitHub due-component.
That builds successfully on the server, but on the client the app fails with:
Error: Cannot find module '/imports/ui/App.vue'

(btw using a relative path to App.vue makes no difference).

I so far have no path to create a runnable version of the app, although creating a new app with 2.13.3 succeeds. Any suggestions anyone?

[hluz]

I was there. And been through all the options of upgrading a Meteor 2 / Vue 2.6 to Meteor 3 / Vue 3 (Options API), and what finally worked for me was avoiding akryum:vue-component and use meteor-vite instead. There are a few threads in the Meteor Forums that may help. I am still using the meteor-vue-tracker@3.0.0-beta.7, which forced me to use a code few workarounds because it it not fully compatible with Vue 3 Options API.

[anderson-2wav]

@hluz I have started working in Meteor 3 on new projects, and I have some very painful similar experiences upgrading Nuxt 2 to Nuxt 3. A few of these complex Meteor 2 projects have grant funded deliverables that requiring a move to Meteor 3 in order to continue development is probably just the end of the project. I have found a copy of the project on an old x86 laptop that still runs, so maybe that will be our savior.

It seems stupid. I understand that all the energy and hope for the future is Meteor 3 and I'm down with that. But utterly breaking the Meteor 2 platform and leaving it that way is unconscionable.