Unplugin Vue Router - Unable to resolve some modules (but works anyway)

[ceigey]

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.

[JorgenVatle]

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.