fix(vite): fix Fast Refresh load error when using defer

[marbemac]

To replicate the problem:

1. Fire up an remix + vite app (I tested on 2.2.0-pre.3)
2. Add a route with a loader that defers, e.g.:

const getData = async () => {
  await new Promise(resolve => setTimeout(resolve, 1000));
  return {
    name: 'marc',
  };
};

export async function loader() {
  const user = getData();

  return defer({ user });
}

export default function Articles() {
  const { user } = useLoaderData<typeof loader>();

  return (
    <Suspense fallback={<div>loading user...</div>}>
      <Await resolve={user}>{user => <div>hi {user.name}</div>}</Await>
    </Suspense>
  );
}

3. Load the route in your browser, see error in console

Why?

While the recommendation to put <LiveReload /> before <Scripts /> mitigates the problem in the non-deferred stream use-case, deferring the stream means that non-async modules on the page might be parsed after async modules (since async modules can be run before page parsing is even complete).

This PR updates the refresh runtime fragment to also be marked as async, which resolves the issue from what I can tell in my local testing.

Probably not the final solution here, as I know ya'll are trying to find a way to avoid having to re-order LiveReload/Scripts in general. But this should at least unblock anybody with an app that uses deferred streaming who is looking to try the vite plugin in the meantime.

[changeset-bot]

🦋 Changeset detected

Latest commit: 8129f3d

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

[remix-cla-bot]

Hi @marbemac,

Welcome, and thank you for contributing to Remix!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected].

Thanks!

- The Remix team

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[markdalgleish]

Thanks for the PR! I just updated your branch, merging the latest from dev and adding a test that fails without your fix.

[markdalgleish]

Test is failing in Firefox, seeing if I can fix it.

[marbemac]

@markdalgleish hmm - I can't reproduce the firefox issue locally - is it still occurring for you?

[markdalgleish]

I could only reproduce it locally when running the test in Firefox via Playwright. I found a workaround that seemed to do the trick though, so CI is passing now.

[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!

[vaishnavi1029]

Error: Remix Vite plugin can't detect preamble. Something is wrong.
❯ app/routes/stored._index.tsx:2:8
1| export default function Comp(){
2| return

jcs

}
here is my vite.config.ts

///
///
import { vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { JSDOMOptions } from "vitest";
installGlobals();

export default defineConfig({
test:{
environment:"jsdom",
globals: true,
setupFiles: ["./set-up-test.env.ts"],
},
plugins: [
remix({
ignoredRouteFiles: ["**/*.css"],
}),
tsconfigPaths(),

],

});
please help me solve this asap