vitejs / vite-plugin-react

The all-in-one Vite plugin for React projects.
MIT License
601 stars 113 forks source link

Type cast in one line arrow function `() => ({} as Type)` cause vite:esbuild transform error #348

Closed daolanfler closed 3 months ago

daolanfler commented 3 months ago

Describe the bug

Type cast in useMemo () => ({} as Type) cause vite:esbuild transform error.

code:

  const v = useMemo(
    () =>
      ({
        name: 'random',
        age: count,
      } as RandomType), // type cast here will cause error
    [count]
  );

  // if not cast to `RandomType` in `()` return , its ok
  const v2 = useMemo<RandomType>(
    () => ({
      name: 'random',
      age: count,
    }),
    [count]
  );

error msg:

10:34:53 [vite] hmr update /src/App.tsx
10:34:53 [vite] Internal server error: Transform failed with 1 error:
/home/projects/vitejs-vite-l8ggg5/src/App.tsx:17:9: ERROR: Expected ";" but found ":"
  Plugin: vite:esbuild
  File: /home/projects/vitejs-vite-l8ggg5/src/App.tsx:17:11

  Expected ";" but found ":"
  15 |      {
  16 |        name: 'random',
  17 |        age: count
     |           ^
  18 |      } as RandomType, // type cast here will cause error
  19 |      [count]

      at failureErrorWithLog (/home/projects/vitejs-vite-l8ggg5/node_modules/esbuild/lib/main.js:1462:15)
      at eval (/home/projects/vitejs-vite-l8ggg5/node_modules/esbuild/lib/main.js:745:50)
      at responseCallbacks.<computed> (/home/projects/vitejs-vite-l8ggg5/node_modules/esbuild/lib/main.js:612:9)
      at handleIncomingPacket (/home/projects/vitejs-vite-l8ggg5/node_modules/esbuild/lib/main.js:667:12)
      at Socket.readFromStdout (/home/projects/vitejs-vite-l8ggg5/node_modules/esbuild/lib/main.js:590:7)
      at Socket.emit (node:events:30:10899)
      at addChunk (node:internal/streams/readable:225:3685)
      at readableAddChunk (node:internal/streams/readable:225:3393)
      at Readable.push (node:internal/streams/readable:225:4971)
      at _0x8d40b9.onStreamRead (node:internal/stream_base_commons:211:2596)

similar code like below doesn't cause error in vanilla vite, but errors with this plugin

  const fakeMemo = (fn: any, dep: []) => fn(dep);
  const v3 = fakeMemo(
    () =>
      ({
        name: 'random',
        age: count,
      } as RandomType),
    []
  );

Reproduction

https://stackblitz.com/edit/vitejs-vite-l8ggg5?file=src%2FApp.tsx

Steps to reproduce

Run npm install then npm run dev

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.1 
    vite: ^5.3.2 => 5.3.3

Used Package Manager

npm

Logs

No response

Validations

ak-adversus commented 3 months ago

This was caused by an issue in babel, which has been fixed by https://github.com/babel/babel/pull/16648