Issues with pre transform step

ak-adversus commented 3 months ago

Describe the bug

Vite breaks when trying to run the pre-transform step on the following code:

const brokenFunction = () => ({
    foo: 'bar',
}) as { foo: 'bar' }

This throws the following error

Plugin: vite:esbuild

  Expected ";" but found "as"
  4  |  const brokenFunction = () => {
  5  |    foo: 'bar'
  6  |  } as {foo: 'bar';};
     |    ^
  7  |
  8  |  const Broken = () => {

From the error log, it seems that at some point, the parentheses wrapping the object have been removed, which causes the broken syntax.

I have tested this on the vanilla-ts and react-ts templates, but it's only broken in the react-ts template, i don't know about any other framework.

Reproduction

https://stackblitz.com/edit/vitejs-vite-fdiygv

Steps to reproduce

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 1.93 GB / 15.68 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.102)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @vitejs/plugin-react: 4.2.0 => 4.2.0
    vite: 5.0.0 => 5.0.0

Used Package Manager

npm

Logs

Full error log!

```shell 11.15.08 [vite] Internal server error: Transform failed with 1 error: C:/Users/name/project/src/main.tsx:6:2: ERROR: Expected ";" but found "as" Plugin: vite:esbuild File: C:/Users/name/project/src/main.tsx:6:1 Expected ";" but found "as" 4 | const brokenFunction = () => { 5 | foo: 'bar' 6 | } as {foo: 'bar';}; | ^ 7 | 8 | const Broken = () => { at failureErrorWithLog (C:\Users\name\project\node_modules\esbuild\lib\main.js:1651:15) at C:\Users\name\project\node_modules\esbuild\lib\main.js:849:29 at responseCallbacks. (C:\Users\name\project\node_modules\esbuild\lib\main.js:704:9) at handleIncomingPacket (C:\Users\name\project\node_modules\esbuild\lib\main.js:764:9) at Socket.readFromStdout (C:\Users\name\project\node_modules\esbuild\lib\main.js:680:7) at Socket.emit (node:events:518:28) at addChunk (node:internal/streams/readable:559:12) at readableAddChunkPushByteMode (node:internal/streams/readable:510:3) at Readable.push (node:internal/streams/readable:390:5) at Pipe.onStreamRead (node:internal/stream_base_commons:190:23) 11.15.08 [vite] Pre-transform error: Transform failed with 1 error: C:/Users/name/project/src/main.tsx:6:2: ERROR: Expected ";" but found "as" ```

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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 vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 3 months ago

Start a new pull request in StackBlitz Codeflow.

vitejs-vite-fdiygv (Open reproduction)

bluwy commented 3 months ago

Looks like some react babel transforms is affecting it:

I'll move this to the plugin-react repo for now, but it could be other dependencies affecting this.

bluwy commented 3 months ago

Oh it looks like someone already opened an issue for this https://github.com/vitejs/vite-plugin-react/issues/348. I'll close this in favour of that then.

vitejs / vite-plugin-react