The plugin should be called before vite/plugin-react or vite/plugin-react-swc for accurate sourcemaps

[onurkerimov]

Context: React + Vite

I noticed that when the plugin is called after one of @vitejs/plugin-react or @vitejs/plugin-react-swc, it may result in inaccurate sourcemaps. I have manually tested this in 2 of my local apps. Listing code-inspector-plugin before or after these two plugins was resulting in two different DOM sourcemaps. The filePath information was always correct, but the line number information was changing immensely, in the scale of tens of lines, depending on the size of the file.

So I have kindly made a small addition that only affects the Vite plugin.

I'm using the following versions:

  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "vite": "^5.0.8",
  "@vitejs/plugin-react-swc": "^3.10.2",
  "@vitejs/plugin-react": "^4.2.1",

I didn't test this thoroughly, however if this caveat is correct, it can be added to the documentation site as well. (Sorry if I missed an already existing one)

Correct way to use it:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc'
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  plugins: [
    codeInspectorPlugin({
      bundler: 'vite',
    }),
    react(), // This should come AFTER the codeInspectorPlugin!
  ],
});

Thank you!

[zh-lx]

Thanks for your PR! I had thought about solving it this way before, but it didn't work. I ran your code just now, the order of plugins has been changed, but it didn't work, either. Have you tested your code on your computer? Does it work?