Wrap jsxDEV which export from react/jsx-dev-runtime

[wqcstrong]

Describe the bug

Background

i18n in my react project is implmented by wrap jsxDEV which is export from react/jsx-dev-runtime, just like interceptor before render.

What happened?

The translate behavior is not expected in serve mode and unexpected result after vite build.

After checking, the more specified detail is there would be two copies of react/jsx-dev-runtime:

1. @vitejs/plugin-react use one;
2. other one imported by myself;

What the unexpected behavior is the 1st one would compile after vite serve, and the 2nd would excute if I trigger hot update behavior, for example, save file.

The expected behavior

The @vitejs/plugin-react is powerful, but what should I do to adapt in my case.

Reproduction

https://github.com/wqcstrong/vite-issues

System Info

System:
    OS: macOS 12.0.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 1.02 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 97.0.4692.71
    Firefox: 95.0.2
    Safari: 15.1
  npmPackages:
    @vitejs/plugin-react: ^1.0.7 => 1.1.4 
    vite: ^2.7.2 => 2.7.12

Used Package Manager

yarn

Logs

No response

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. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• 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.

[wqcstrong]

Just in above case someone else wanted to get some advice.

Since I don't get any response or comments, as compromise, I adjusted the implementation... give up modify react's "render" methods except for React.createElement.

Following is the config:

// vite.config.ts
import react from '@vitejs/plugin-react'
import { viteExternalsPlugin as externals } from 'vite-plugin-externals';

export default defineConfig({
  ...,
  esbuild: {
    jsxFactory: "React.createElemennt",
    jsxFragment: "React.Fragment"
  },
  plugins: [
    react({
      jsxRuntime: "classic"
    }),
    externals({
      react: 'window.React',
      'react-dom': 'window.ReactDOM'
    },{ useWindow: false })
  ]
})

and remove the jsxDev interceptor in the business code.