Astro 3.0 dev server error when base path is set and React component loaded

[dallyh]

Astro Info

Astro                    v3.0.5
Node                     v18.17.1
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When the base path is set in the Astro config, and an React component is used with the "client" directive, Astro fails to load the webpage only when using the dev server. After the webpage gets build everything works fine. This kind of neglectes any attempts to quickly develop and debug React components. This issue seems a little widespread, as some people on Discord confirmed that it is not only me.

Config is set like this:

// https://astro.build/config
export default defineConfig({
  integrations: [react()],
  base: "basepath",
});

The error which prevents load/render of the page is:

Failed to resolve import "/basepath/@react-refresh" from "astro:scripts/before-hydration.js". Does the file exist?

What's the expected result?

Site with React components and a base path set in a config should work in a dev server without any errors.

Link to Minimal Reproducible Example

https://stackblitz.com/github/dallyh/astro-react-refresh-issue

Participation

• I am willing to submit a pull request for this issue.

[paoloose]

Relevant piece of code introduced in Astro 3.0: e07a4e5#diff-714fabdf53991de22f8549ac97613b5d49f9c6aaa096a57d8a29f220758978c4R66-R69

Plugin's side: https://github.com/vitejs/vite-plugin-react/blob/286360281992c425bf75cb0a18846f65fcdc5ef3/packages/plugin-react/src/fast-refresh.ts#L23-L29

Not replacing __BASE__ with the Astro config.base but with a forward slash / completely solved the problem for me, but I'm not sure it's the proper fix or why it works

        if (command === "dev") {
          const preamble = FAST_REFRESH_PREAMBLE.replace(
            `__BASE__`,
-            appendForwardSlash(config.base)
+           '/'
          );
          injectScript("before-hydration", preamble);
        }

[sasoria]

I'm getting the same error as well. This is a temporary fix I'm using:

export default defineConfig({
  base: import.meta.env.DEV ? "" : "/base-path",
  ...
});