Vue 2 is not working with Meteor 2.12 #437
Comments
|
@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) { 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. |
|
Not sure if thats the best way to handle the issue, but submitted a PR for the workaround that works for me. |
|
Thank you. I've updated our project last night an am experiencing the same issue. Appreciate the work around. |
|
Adding follow up. It appears there is a difference between the atmosphere package and the latest repo.
This solved the issue for us in multiple apps |
|
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) 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:
Conflict: Constraint [email protected] is not satisfied by caching-html-compiler 1.2.0.
Conflict: Constraint [email protected] is not satisfied by templating-tools 1.2.0.
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. 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. |
Can you elaborate how to fix the problem.
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? |
I think what he means in step 3. is to remove (or comment out) the |
|
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, |
* Update project to meteor v2.13.3 * Fix counters * Update packages * Fix akryum:vue-component see meteor-vue/vue-meteor#437 * Update jszip * Add a makefile * Update changelog * Update docker files * Update changelog * Fix counter * Add atomic update, like before * Remove useless file * Update changelg * Add minio * Update changelog
|
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. Now how to update an existing app? In the existing app: 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 I tried the recipe suggested by @eganpg above (installing a local copy of GitHub due-component. (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? |
|
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 |
|
@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. |
|
@anderson-2wav. You should be able to use meteor-vite with Meteor 2, but I think that for Vue 2 it requires Vue 2.7. https://github.com/JorgenVatle/meteor-vite?tab=readme-ov-file#meteor-v2 |
|
@hluz Thanks! I admit I've been scared to go to vite with Meteor 2, but I should get over it and get on with it. ;-) And to all the meteor contributors I regret and apologize for my harsh tone. I'm hugely grateful for all my team has been able to do with Meteor, since 2012 actually. |
|
We are largely in the same boat @hluz. We have some fairly complex vue2/meteor2 codebases using my fork of the meteor tracker. Upgrading to vue2.7 breaks badly without changing your tracker libraries to use meteor-vue-tracker as above. There was a magic combination of meteor-vue-tracker, meteor2, and vite that did work for us but enough little glitches we never ended up going with it, especially with other vue2 libraries in the mix. However migrating to vue3 requires meteor 3 from our testing, the options API seems poorly supported in vue3 which is not limited to meteor, and so significant effort and rewriting of both backend (async) code and front end (vue2 to vue3) and also vue3 options to composition API. For us, options API was what we loved about vue in the first place (and being able to drop it into older apps), and while we should have started this work ages ago we were holding off hoping it would get easier. We have committed to having to rework most of our app and have actually decided to move to svelte/meteor3 and react/meteor3 depending on the codebase/team instead of vue3/meteor3 while doing this. Not all bad, since we already use both for other smaller projects, and realistically we would have had to do much of this moving to vue3 anyway. |
|
Migration to Meteor 3 we had to do anyway, so we fixed the backend first to the async mongo API. Then we managed to stay with Vue3 Options API using vue-meteor-tracker latest beta. There are only a few things you have to do to make your subscriptions work nicely with options API:
The whole thing follows this pattern: import { autorun } from 'meteor-vue-tracker'
import { CollectionA } from '/imports/db/CollectionA'
export default {
data () {
return {
subReady: { // use this instead of $subReady
},
colAData: [],
par1: 'default'
}
},
meteor: {},
mounted() {
autorun(() => { // autorun not required if there is no reactive parameter for subscription
this.subReady.subNameA = this.$subscribe('subNameA', { par1: this.par1 }).ready
});
autorun(() => {
this.colAData = CollectionA.find({ par1: this.par1 }).fetch();
});
},
...
}Note: meteor-vue-tracker does no support async calls yet... But I can live without sync since all my db updates are server side via method calls only. Lets hope that better/easier Meteor Tracker integration with Vue 3 comes along. |
To reproduce:
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.jsthat does look like this: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.
The text was updated successfully, but these errors were encountered: