A change in @vitejs/plugin-react@5.03 broke @wyw-in-js/vite

[val1984]

Related plugins

• plugin-react

• plugin-react-swc

• plugin-react-oxc

• plugin-rsc

Describe the bug

Using this new project with @vitejs/plugin-react 5.0.3 or 5.0.4 and the latest version of @wyw-in-js/react, I get the following error in development mode:

[plugin:wyw-in-js] ENOENT: no such file or directory, open '/@react-refresh'

/home/deck/Development/mre/src/App.tsx

at Object.readFileSync (node:fs:440:20)
at TransformCacheCollection.invalidateIfChanged (/home/deck/Development/mre/node_modules/.pnpm/@wyw-in-js+transform@0.7.0_typescript@5.8.3/node_modules/@wyw-in-js/transform/lib/cache.js:89:53)
at Entrypoint.innerCreate (/home/deck/Development/mre/node_modules/.pnpm/@wyw-in-js+transform@0.7.0_typescript@5.8.3/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.js:104:54)
at /home/deck/Development/mre/node_modules/.pnpm/@wyw-in-js+transform@0.7.0_typescript@5.8.3/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.js:85:47
at EventEmitter.perf (/home/deck/Development/mre/node_modules/.pnpm/@wyw-in-js+transform@0.7.0_typescript@5.8.3/node_modules/@wyw-in-js/transform/lib/utils/EventEmitter.js:45:20)
at Entrypoint.create (/home/deck/Development/mre/node_modules/.pnpm/@wyw-in-js+transform@0.7.0_typescript@5.8.3/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.js:84:25)
at Entrypoint.createRoot (/home/deck/Development/mre/node_modules/.pnpm/@wyw-in-js+transform@0.7.0_typescript@5.8.3/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.js:62:32)
at transform (/home/deck/Development/mre/node_modules/.pnpm/@wyw-in-js+transform@0.7.0_typescript@5.8.3/node_modules/@wyw-in-js/transform/lib/transform.js:98:45)
at TransformPluginContext.transform (file:///home/deck/Development/mre/node_modules/.pnpm/@wyw-in-js+vite@0.7.0_typescript@5.8.3_vite@7.1.7/node_modules/@wyw-in-js/vite/esm/index.mjs:118:28)
at EnvironmentPluginContainer.transform (file:///home/deck/Development/mre/node_modules/.pnpm/vite@7.1.7/node_modules/vite/dist/node/chunks/dep-Bm2ujbhY.js:30984:51)
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
at async loadAndTransform (file:///home/deck/Development/mre/node_modules/.pnpm/vite@7.1.7/node_modules/vite/dist/node/chunks/dep-Bm2ujbhY.js:26116:26)
at async viteTransformMiddleware (file:///home/deck/Development/mre/node_modules/.pnpm/vite@7.1.7/node_modules/vite/dist/node/chunks/dep-Bm2ujbhY.js:27187:20)

Reproduction

https://github.com/val1984/mre

Steps to reproduce

• pnpm i
• pnpm dev
• the error occurs

Same steps on the working branch does not exhibit the same error

System Info

System:
    OS: Linux 6.11 Alpine Linux
    CPU: (8) x64 AMD Custom APU 0932
    Memory: 4.90 GB / 14.46 GB
    Container: Yes
    Shell: 5.2.37 - /bin/bash
  Binaries:
    Node: 24.9.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 11.6.0 - /usr/local/bin/npm
    pnpm: 10.17.1 - ~/Development/node_modules/.bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^5.0.3 => 5.0.4 
    vite: ^7.1.7 => 7.1.7

Used Package Manager

pnpm

Logs

Click to expand!

> mre@0.0.0 dev /home/deck/Development/mre
> vite --debug

2025-10-01T22:19:02.246Z vite:config config file loaded in 227.11ms
2025-10-01T22:19:02.265Z vite:env loading env files: [
  '/home/deck/Development/mre/.env',
  '/home/deck/Development/mre/.env.local',
  '/home/deck/Development/mre/.env.development',
  '/home/deck/Development/mre/.env.development.local'
]
2025-10-01T22:19:02.266Z vite:env env files loaded in 0.91ms
2025-10-01T22:19:02.266Z vite:env using resolved env: {}
2025-10-01T22:19:02.283Z vite:config using resolved config: {
  plugins: [
    'vite:optimized-deps',
    'vite:watch-package-data',
    'vite:pre-alias',
    'alias',
    'vite:react-babel',
    'vite:react-refresh',
    'vite:modulepreload-polyfill',
    'vite:resolve',
    'vite:html-inline-proxy',
    'vite:css',
    'vite:esbuild',
    'vite:json',
    'vite:wasm-helper',
    'vite:worker',
    'vite:asset',
    'vite:wasm-fallback',
    'vite:define',
    'vite:css-post',
    'vite:worker-import-meta-url',
    'vite:asset-import-meta-url',
    'vite:dynamic-import-vars',
    'vite:import-glob',
    'wyw-in-js',
    'vite:client-inject',
    'vite:css-analysis',
    'vite:import-analysis'
  ],
  server: {
    port: 5173,
    strictPort: false,
    host: undefined,
    allowedHosts: [],
    https: undefined,
    open: false,
    proxy: undefined,
    cors: {
      origin: /^https?:\/\/(?:(?:[^:]+\.)?localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/
    },
    headers: {},
    warmup: { clientFiles: [], ssrFiles: [] },
    middlewareMode: false,
    fs: {
      strict: true,
      deny: [ '.env', '.env.*', '*.{crt,pem}', '**/.git/**' ],
      allow: [ '/home/deck/Development/mre' ]
    },
    preTransformRequests: true,
    perEnvironmentStartEndDuringDev: false,
    sourcemapIgnoreList: [Function: isInNodeModules]
  },
  esbuild: { jsxDev: true, jsx: 'automatic', jsxImportSource: undefined },
  optimizeDeps: {
    include: [
      'react',
      'react-dom',
      'react/jsx-dev-runtime',
      'react/jsx-runtime'
    ],
    exclude: [],
    needsInterop: [],
    extensions: [],
    disabled: undefined,
    holdUntilCrawlEnd: true,
    force: false,
    noDiscovery: false,
    esbuildOptions: { preserveSymlinks: false, jsx: 'automatic' }
  },
  build: {
    target: [ 'chrome107', 'edge107', 'firefox104', 'safari16' ],
    polyfillModulePreload: true,
    modulePreload: { polyfill: true },
    outDir: 'dist',
    assetsDir: 'assets',
    assetsInlineLimit: 4096,
    sourcemap: false,
    terserOptions: {},
    rollupOptions: { onwarn: [Function: onwarn] },
    commonjsOptions: { include: [ /node_modules/ ], extensions: [ '.js', '.cjs' ] },
    dynamicImportVarsOptions: { warnOnError: true, exclude: [ /node_modules/ ] },
    write: true,
    emptyOutDir: null,
    copyPublicDir: true,
    manifest: false,
    lib: false,
    ssrManifest: false,
    ssrEmitAssets: false,
    reportCompressedSize: true,
    chunkSizeWarningLimit: 500,
    watch: null,
    cssCodeSplit: true,
    minify: 'esbuild',
    ssr: false,
    emitAssets: false,
    createEnvironment: [Function: createEnvironment],
    cssTarget: [ 'chrome107', 'edge107', 'firefox104', 'safari16' ],
    cssMinify: true
  },
  environments: {
    client: {
      define: undefined,
      resolve: {
        externalConditions: [ 'node', 'module-sync' ],
        extensions: [
          '.mjs',  '.js',
          '.mts',  '.ts',
          '.jsx',  '.tsx',
          '.json'
        ],
        dedupe: [],
        noExternal: [],
        external: [],
        preserveSymlinks: false,
        alias: [
          {
            find: /^\/?@vite\/env/,
            replacement: '/@fs/home/deck/Development/mre/node_modules/.pnpm/vite@7.1.7/node_modules/vite/dist/client/env.mjs'
          },
          {
            find: /^\/?@vite\/client/,
            replacement: '/@fs/home/deck/Development/mre/node_modules/.pnpm/vite@7.1.7/node_modules/vite/dist/client/client.mjs'
          }
        ],
        mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ],
        conditions: [ 'module', 'browser', 'development|production' ],
        builtins: []
      },
      keepProcessEnv: false,
      consumer: 'client',
      optimizeDeps: {
        include: [
          'react',
          'react-dom',
          'react/jsx-dev-runtime',
          'react/jsx-runtime'
        ],
        exclude: [],
        needsInterop: [],
        extensions: [],
        disabled: undefined,
        holdUntilCrawlEnd: true,
        force: false,
        noDiscovery: false,
        esbuildOptions: { preserveSymlinks: false, jsx: 'automatic' }
      },
      dev: {
        warmup: [],
        sourcemap: { js: true },
        sourcemapIgnoreList: [Function: isInNodeModules],
        preTransformRequests: true,
        createEnvironment: [Function: defaultCreateClientDevEnvironment],
        recoverable: true,
        moduleRunnerTransform: false
      },
      build: {
        target: [ 'chrome107', 'edge107', 'firefox104', 'safari16' ],
        polyfillModulePreload: true,
        modulePreload: { polyfill: true },
        outDir: 'dist',
        assetsDir: 'assets',
        assetsInlineLimit: 4096,
        sourcemap: false,
        terserOptions: {},
        rollupOptions: { onwarn: [Function: onwarn] },
        commonjsOptions: { include: [ /node_modules/ ], extensions: [ '.js', '.cjs' ] },
        dynamicImportVarsOptions: { warnOnError: true, exclude: [ /node_modules/ ] },
        write: true,
        emptyOutDir: null,
        copyPublicDir: true,
        manifest: false,
        lib: false,
        ssrManifest: false,
        ssrEmitAssets: false,
        reportCompressedSize: true,
        chunkSizeWarningLimit: 500,
        watch: null,
        cssCodeSplit: true,
        minify: 'esbuild',
        ssr: false,
        emitAssets: true,
        createEnvironment: [Function: createEnvironment],
        cssTarget: [ 'chrome107', 'edge107', 'firefox104', 'safari16' ],
        cssMinify: true
      },
      plugins: [
        {
          name: 'vite:optimized-deps',
          applyToEnvironment: [Function: applyToEnvironment],
          resolveId: [Function: resolveId],
          load: [AsyncFunction: load]
        },
        {
          name: 'vite:watch-package-data',
          buildStart: [Function: buildStart],
          buildEnd: [Function: buildEnd],
          watchChange: [Function: watchChange]
        },
        {
          name: 'vite:pre-alias',
          applyToEnvironment: [Function: applyToEnvironment],
          resolveId: [AsyncFunction: resolveId]
        },
        {
          name: 'alias',
          buildStart: [AsyncFunction: buildStart],
          resolveId: [Function: resolveId]
        },
        {
          name: 'vite:react-babel',
          enforce: 'pre',
          config: [Function: config],
          configResolved: [Function: configResolved],
          options: [Function: options],
          transform: {
            filter: {
              id: {
                include: /\.[tj]sx?(?:\?.*)?$/,
                exclude: /\/node_modules\//
              }
            },
            handler: [AsyncFunction: handler]
          }
        },
        {
          name: 'vite:react-refresh',
          enforce: 'pre',
          config: [Function: config],
          resolveId: {
            filter: { id: /^\/@react\-refresh$/ },
            handler: [Function: handler]
          },
          load: {
            filter: { id: /^\/@react\-refresh$/ },
            handler: [Function: handler]
          },
          transformIndexHtml: [Function: transformIndexHtml]
        },
        {
          name: 'vite:modulepreload-polyfill',
          resolveId: {
            filter: { id: /^vite\/modulepreload\-polyfill$/ },
            handler: [Function: handler]
          },
          load: {
            filter: { id: /^

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

It's also reported in Anber/wyw-in-js#150

[ArnaudBarre]

I've commented there and I will try to provide support. From what I understand the plugin is evaluated client code server side which I'm surprised didn't cause issue sooner. We change a bit some internals of how we handled React refresh, but until a more concrete explanation from them on why this is breaking a legitimate usecase I think it's onto them to better handle code transformed by the react plugin.