I’m not sure if this is a Meteor issue or a React Router issue but React Router v6 worked fine but when I upgraded to React Router v7, it broke my app.
I suspect that this is because v7 is now asking for a deep import from react-router/dom but I’m not sure.
I get these errors in the browser console
Uncaught SyntaxError: Cannot use 'import.meta' outside a module
Uncaught TypeError: Cannot read properties of undefined (reading 'meteorInstall')
Uncaught TypeError: Cannot read properties of undefined (reading 'Mongo')
Uncaught ReferenceError: meteorInstall is not defined
And these errors in the server
Unable to resolve some modules:
"react-router/dom" in react-router-dom/dist/index.mjs
And this TypeScript error
Cannot find module 'react-router/dom' or its corresponding type declarations.
I’ve added an issue on React Router in case the issue is more on their side: [Bug]: v7 Not Working with Meteor · Issue #12381 · remix-run/react-router · GitHub
I fixed that by going into the npm_modules where the library is “installed” and changed all the mjs file to extension js. Same for TS related files.
After I checked the net for that error, I used the babel library recommwnded but it didn’t fix the issue.
I see v7 has a lot of reported issues so minor versions of it might be published often.
Mine works ok now.
Don’t know about the server error cause I don’t use SSR
I’m not using SSR either. I suppose it would be more accurate to say that error appears in the terminal
I’ll stick with V6 until it gets fixed. I don’t want to mess with node modules if I can help it
@paulishca Do you use any automatic patching strategy to ensure the changes you make for that library stay functional?
On my side, I use libraries like patch-package to easily manage changes to npm libraries. It helps automate the patch installation process and ensures my updates persist.
@merlinpatt: Regarding the issue mentioned, I haven’t tested upgrading React Router to v7 myself, I’m still on v6. I’m unsure if there’s another workaround or specific issue in the upgrade process. However, I believe Meteor struggles with .mjs files, which might explain why switching to .js or .ts formats makes it work, as suggested above.
ESM proper support would be a big improvement if Meteor’s bundler capabilities were updated, especially with a modern bundler. Using something like jorgenvatle:vite-bundler might help on that.
That said, I haven’t worked much with the Meteor bundler or .mjs files to provide a more detailed answer.
@nachocodoner I checked React-Router change log and couldn’t see a permanent move to modules. In the Git issues there are plenty coming in every day so I think this could be an error from their developers.
I left a note there where @merlinpatt opened an issue with them.
I only altered the file for now, will refrain from an update until this is clarified. Local changes to NPM go to production as they are being used for the build of production bundles.
By the way I mistakenly said I changed file names but in fact I changed the package.json to only look into js files instead of mjs.
1 Like