Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

lineNumber error for __source prop #235

Closed
7 tasks done
zjxxxxxxxxx opened this issue Oct 13, 2023 · 3 comments · Fixed by #246 · May be fixed by WontonSam/function-examples#31
Closed
7 tasks done

lineNumber error for __source prop #235

zjxxxxxxxxx opened this issue Oct 13, 2023 · 3 comments · Fixed by #246 · May be fixed by WontonSam/function-examples#31
Labels
bug Something isn't working

Comments

@zjxxxxxxxxx
Copy link

zjxxxxxxxxx commented Oct 13, 2023

Describe the bug

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

1697167585043

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

@ArnaudBarre
Copy link
Member

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.

@ArnaudBarre ArnaudBarre added bug Something isn't working and removed pending triage labels Oct 17, 2023
@zjxxxxxxxxx
Copy link
Author

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

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

@ArnaudBarre
Copy link
Member

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,
      }),
    ],

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
2 participants