React fast refresh script error

Describe the bug

When trying to enable react fast refresh script, I get following error in browser console:

Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201
...

Reproduction

Using following vite config:

import { viteForAem } from '@aem-vite/vite-aem-plugin';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

const useCaching = process.env.AEM_CACHING === 'true';

export default defineConfig(({ command, mode }) => ({
  base: command === 'build' ? '/etc.clientlibs/<app>/clientlibs/' : '/',
  publicDir: command === 'build' ? false : 'src/assets',

  build: {
    brotliSize: false,
    manifest: false,
    minify: mode === 'development' ? false : 'terser',
    outDir: 'dist',
    sourcemap: command === 'serve' ? 'inline' : false,

    rollupOptions: {
      format: 'es',
      input: {
        main: 'src/main.jsx',
      },
      output: {
        chunkFileNames: '<client-lib>/resources/chunks/[name]-[hash].js',
        entryFileNames: '<client-lib>/resources/[name].js',
      },
    },
  },

  plugins: [
    react(),
    viteForAem({
      contentPaths: ['<content-path>'],
      publicPath: '/etc.clientlibs/<app>/clientlibs/<client-lib>',
      clientlibsExpression: '/etc.clientlibs/<app>/clientlibs/<client-lib>(.*)',
      rewriterOptions: {
        resourcesPath: 'resources',
        minify: false,
        caching: {
          keyFormat: 'acs-classic',
          enabled: command === 'build' && mode === 'production' && useCaching,
        },
      },
    }),
  ],

  server: {
    origin: 'http://localhost:3000',
  },
}));

System Info

Output of npx envinfo --system --npmPackages @aem-vite/aem-vite --binaries --browsers:

  System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1 Pro
    Memory: 369.52 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
  Browsers:
    Chrome: 126.0.6478.62
    Edge: 126.0.2592.61
    Safari: 17.5

package.json versions:

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
  },
  "devDependencies": {
    "@aem-vite/vite-aem-plugin": "^5.0.3",
    "@vitejs/plugin-react": "^4.3.1",
    "vite": "^5.2.11"
  },

Used package manager: npm

Logs

N/A

Possible solution

in https://github.com/aem-vite/vite-aem-plugin/blob/main/src/helpers.ts#L25, the function getViteScripts appends the react refresh script last.

So in my browser HTML I see the following:

 <script type="module" src="/@vite/client"></script>
<script type="module" src="/src/main.jsx"></script>

<script type="module">

import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true

</script>

What is happening is __vite_plugin_react_preamble_installed__ is not getting set before my javascript libraries load, and it is throwing the error.

If we simply reorder the injected scripts so that the Vite React preamble code is loaded before any user javascript libraries, the problem seems to be fixed

Before submitting the issue, please make sure you do the following

[x] Read the Contributing Guidelines.
[x] Read the documentation.
[x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[x] Provide a description in this issue that describes the bug.
[x] Make sure this is an issue with @aem-vite/aem-vite and not a Rollup/Vite issue.
[x] Check that this is a concrete bug. For Q&A open a GitHub discussion.

aem-vite / vite-aem-plugin