lineNumber error for __source prop

[zjxxxxxxxxx]

Describe the bug

In development, lineNumber for the __source prop provided by babel-plugin-transform-react-jsx-source is wrong.

I have solved this issue locally and I can submit a pr for this issue.

Reproduction

https://stackblitz.com/edit/vitejs-vite-nje3zq?file=src%2FApp.tsx&terminal=dev

Steps to reproduce

Wait for the project to run automatically to see the requests from App.tsx

System Info

System:
    OS: macOS 14.0
    CPU: (12) arm64 Apple M2 Pro
    Memory: 3.39 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.1/bin/yarn
    npm: 9.6.2 - ~/.nvm/versions/node/v16.19.1/bin/npm
    pnpm: 8.6.11 - ~/.nvm/versions/node/v16.19.1/bin/pnpm
  Browsers:
    Chrome: 117.0.5938.132
    Safari: 17.0
  npmPackages:
    @vitejs/plugin-legacy: ^4.0.2 => 4.1.1 
    @vitejs/plugin-react: ^4.0.1 => 4.1.0 
    vite: ^4.3.9 => 4.4.11

Used Package Manager

npm

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.
• 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.

[ArnaudBarre]

The issue:

Since vitejs/vite#9590 the pipeline is:

• babel: JSX -> JSX with fast refresh
• esbuild: JSX with fast refresh -> JS with jsxDev calls

The issue is that the first transform drop some line breaks, which then make esbuild put the wrong line number.

To avoid this, the fast refresh transformation should be done at the same time than fast refresh:

• using SWC with the react-swc plugin
• by using Babel now and adding `` to your config and deps:

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      react({
        babel: {
          plugins:
            mode === 'development'
              ? ['@babel/plugin-transform-react-jsx-development']
              : undefined,
        },
      }),
    ],
  };
});

Why this second option is not the default?
Good question, it seems that because esbuild added support jsxDev and at the same time some restoreJSX functionality was causing trouble, everything was changed at the same time without taking this issue into account (never though of it before looking into it).
I will look into changing this, I will a do a major in few weeks with Vite 5 release so this could be a good timing.

[zjxxxxxxxxx]

I tried to configure retainLines for babel, and it seems to work for now.

export default defineConfig({
  plugins: [
    react({
      babel: {
        retainLines: isDev,
      },
    }),
  ],
});

[ArnaudBarre]

Oh nice, I will test which one has the more impact on the dev startup time.
Don't forget to put the babel config behind the dev check, otherwise you will run babel during prod builds:

    plugins: [
      react({
        babel: mode === 'development' ? {
          plugins: ['@babel/plugin-transform-react-jsx-development']    
        } : undefined,
      }),
    ],