Unplugin Vue Router - Unable to resolve some modules (but works anyway)
Opened this issue · 1 comments
So I decided to try https://github.com/posva/unplugin-vue-router which is basically a file-based router replacement for vue-router, taking the form of a Vite plugin.
It basically generates a sort of virtual nested package for vue-router
(a real package, that I also have installed), called vue-router/auto
. Presumably this only exists in the Vite build context, as I can't find any generated files hanging around in node_modules
. Anyway, this package handles the routing based on automatically generated rules and imports based on your files and directories.
To cut a long story short, everything's working, but I noticed that on page load and on server rebuild I get Meteor's typical "there's a module missing" error messages:
Unable to resolve some modules:
"vue-router/auto" in /Users/christian/Developer/hubble-check-meteor3/imports/ui/plugins/router.ts (web.browser.legacy)
If you notice problems related to these missing modules, consider running:
meteor npm install --save vue-router
And in the browser:
Uncaught Error: Cannot find module 'vue-router/auto'
at makeMissingError (modules-runtime-hot.js?hash=82c21ce5103770e3ed6096f6e6eee4aeb50ee752:232:12)
at Module.resolve (modules-runtime-hot.js?hash=82c21ce5103770e3ed6096f6e6eee4aeb50ee752:247:17)
at Module.moduleLink [as link] (modules.js?hash=db583c48169d9f4def68315139cdcb205e0e1298:361:25)
at app.js?hash=a83209426c2a4d01cf4014743e1e4e81db50da70:31:11
at module (app.js?hash=a83209426c2a4d01cf4014743e1e4e81db50da70:44:3)
at fileEvaluate (modules-runtime-hot.js?hash=82c21ce5103770e3ed6096f6e6eee4aeb50ee752:386:7)
at Module.require (modules-runtime-hot.js?hash=82c21ce5103770e3ed6096f6e6eee4aeb50ee752:268:27)
at mod.require (modules.js?hash=db583c48169d9f4def68315139cdcb205e0e1298:294:33)
at Module.moduleLink [as link] (modules.js?hash=db583c48169d9f4def68315139cdcb205e0e1298:368:22)
at app.js?hash=a83209426c2a4d01cf4014743e1e4e81db50da70:240:11
(this error also appears in production, but of course everything's minimised)
Now, it's all working... I can change routes, I don't get errors when changing routes, I can mess around with the Vite config and nothing breaks, but I think Meteor's somehow double handling this module when it should really just be Vite's job to deal with this module.
But not 100% sure what solutions are available.
I know from the Vite side we can externalise packages easily, as per the example in the readme:
optimizeDeps: {
exclude: ['@meteor-vite/react-meteor-data'],
}
But I don't think the reverse exists (or if that's desirable).
(I know Meteor has a client/compatibility
folder but I believe that's intended for scripts running in global context and predates the shift to ES modules).
Anyway, this is happening in a closed-source project so I can't share an example right now, when I have a moment I'll have to generate a skeleton app reproducing this. Just writing the issue now in case something comes to mind.
Hey there 👋
I'm using the same plugin for one of my Meteor & Vue projects and can't recall running into this. 🤔
Judging from the error message in the browser console, it seems like Meteor is trying to bundle unplugin-vue-router
instead of Vite. Could you check your Meteor client.mainModule
file and make sure it isn't importing any application code?
Normally the client.mainModule
(specified in your project's package.json
) should only contain Meteor package imports automatically added by meteor-vite
. Think of the entry module you specify in your Vite config as the new entrypoint for the Meteor client.