fix(remix-dev/vite): fix react-refresh/babel plugin resolution

[hi-ogawa]

Closes: #7905

I think this error is caused by the combination of:

• babel does its own resolution when plugins option is passed as a string (not sure what rule exactly...)
• when running custom server (by node ./server.mjs), the base of such resolution becomes user's root directory.
• react-refresh package (transitive dependency of @remix-run/dev) is not visible from root directory when using pnpm's non-flat node_modules,

Looking at vite-plugin-react, they indeed resolve plugin library on its own then pass to plugins option of babel.transformAsync (see "additional notes" below).
So this PR align with it in a similar way by directly calling require("react-refresh/babel") within @remix-run/dev.

I think the reason why this issue doesn't manifest when running a server via remix cli is that, in that case, the babel plugin resolution starts from @remix-run/dev package directory and node_modules/react-refresh dependency is visible from that directory.

(Additional notes)

vite-plugin-react currently does dynamic import with own caching to resolve babel plugin https://github.com/vitejs/vite-plugin-react/blob/b255776f75ced38e9ae8d0ba2f9113e697159a73/packages/plugin-react/src/index.ts#L197, but they were also using require("react-refresh/babel") before package migration done in vitejs/vite-plugin-react@e999b23 (see the deleted file packages/plugin-react/src/index.js).

Testing Strategy:

I verified this fix the issue on pnpm by applying a patch in the reproduction example via pnpm patch / patch-commit:

diff --git a/dist/vite/plugin.js b/dist/vite/plugin.js
index 3f025ab178692932a2c3b6527d5d82a60021f8b6..129c83032a14cf35a815141d7e1666cc6a14ef0d 100644
--- a/dist/vite/plugin.js
+++ b/dist/vite/plugin.js
@@ -551,7 +551,7 @@ const remixVitePlugin = (options = {}) => {
           allowAwaitOutsideFunction: true,
           plugins: ["jsx", "typescript"]
         },
-        plugins: ["react-refresh/babel"],
+        plugins: [require("react-refresh/babel")],
         sourceMaps: true
       });
       if (result === null) return;

[changeset-bot]

🦋 Changeset detected

Latest commit: 7f803e0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@remix-run/dev	Patch
create-remix	Patch
remix	Patch
@remix-run/architect	Patch
@remix-run/cloudflare	Patch
@remix-run/cloudflare-pages	Patch
@remix-run/cloudflare-workers	Patch
@remix-run/css-bundle	Patch
@remix-run/deno	Patch
@remix-run/eslint-config	Patch
@remix-run/express	Patch
@remix-run/node	Patch
@remix-run/react	Patch
@remix-run/serve	Patch
@remix-run/server-runtime	Patch
@remix-run/testing	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[hi-ogawa]

I see firefox integration test failed on CI, but I cannot reproduce it locally:

$ yarn test:integration -- integration/vite-dev-express-test.ts --project firefox
...
Running 1 test using 1 worker
  1 passed (9.4s)

EDIT: It seems CI passed after re-run.

[pcattori]

@hi-ogawa thanks, looks great!

[github-actions]

🤖 Hello there,

We just published version 2.3.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.3.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!