Error: React Refresh runtime in production bundle

[timsun28]

After deploying my app to a server with meteor 3.0 and vite, I found in the console logs an error regarding react refresh that was still in the production bundle.

My entrypoint file looks like this:

/**
 * These modules are automatically imported by jorgenvatle:vite-bundler.
 * You can commit these to your project or move them elsewhere if you'd like,
 * but they must be imported somewhere in your Meteor entrypoint file.
 *
 * More info: https://github.com/JorgenVatle/meteor-vite#lazy-loaded-meteor-packages
 **/
import 'meteor/zodern:relay/client';
/** End of vite-bundler auto-imports **/

import "react";
import "react-dom";
import "react-dom/client";
import "react/jsx-dev-runtime";
import "react-refresh";

As described here

And my react-refresh.ts file in the server folder looks like it does in the react example.

I found that if I removed the import "react-refresh" from the entrypoint file, the issue was resolved and the hot-module-reload is still very fast in the dev environment.

Should this just be changed in the readme or should the import still be used and is there some other config to exclude it from the production bundle?

[JorgenVatle]

Hey there. Sorry it took so long to get back to you on this. I believe some of the official Meteor React packages might indirectly depend on it. If I recall correctly it could cause production builds to fail in some instances. If builds are passing on your end without it, you're probably fine to remove it.

We have a copy of react-meteor-data that is published through npm that addresses issues like this. Meteor analyzes your client entry file when creating your client bundle and omits any unused Atmosphere dependencies when they're not in use by your app. Since your Vite bundle is injected into your client bundle after the analyzation process, you can end up in a situation where some external dependencies used from your Vite entry end up being omitted from the Meteor client bundle.

By publishing react-meteor-data through npm rather than Atmosphere, the entire build process for those packages can be shifted onto Vite. This should lead to much faster builds overall, both for development and when building for production.

---

Migrating an existing app using Atmosphere's react-meteor-data to the npm package (@meteor-vite/react-meteor-data) just involves running a full search and replace for import strings with 'react-meteor-data' and replacing them with '@meteor-vite/react-meteor-data'.

Regex search

from ['"]react-meteor-data["']

Replacement

from '@meteor-vite/react-meteor-data'

[timsun28]

Thank you for your reply!

I'm personally not using react-meteor-data, but I was talking about react-refresh. Another issue that I have noticed in the last couple of weeks is that when I'm editing server side code, I have to refresh my webpage, because it would call an old version of the method I was changing. Could this issue have something todo with this or would it be better to create a separate issue for this?

I'm just wondering what we need "react-refresh" for in a meteor-vite app and why it's still included in the production build, eventhough the script is only added if Meteor.isDevelopment.

[JorgenVatle]

If you're not using react-meteor-data, you should be able to omit all those React imports from your Meteor client entry. 👍 I'll make some changes to the docs so it's a little more clear. Thanks for the heads up.

As for the page reloads when server-side code changes - I believe that is default behaviour if the client is dependent on it (e.g. methods for Optimistic UI). It should happen automatically as soon as the server is restarted though. If you need to manually refresh, I suspect it would be related to our compatibility plugin for zodern:relay.

If you got the time, do feel free to open another issue and I'll follow up over there once I have more details.

[timsun28]

This resolved the issue, thank you!

For the other issue I created a new issue

This issue can be closed!