Error `Unexpected token '{'` after upgrade vite@4.3.9 to vite@4.4.0

mosofsky commented 1 year ago

Describe the bug

I tried to upgrade vite@4.3.9 to vite@4.4.0 but Cypress could not longer run tests because of the error Unexpected token '{' (see logs section for more detailed stack trace).

Reproduction

sorry none at this time

Steps to reproduce

I will write more detailed steps to reproduce if this upgrade becomes more important.

I suspect the following would work:

Create a react app using TypeScript
yarn add cypress@8.5.0 (note, I'm stuck on this old Cypress version)
Create a simple Cypress test
Try to run the Cypress test against the react app
Observe error in the Cypress console

System Info

"cypress": "8.5.0",
"vite-tsconfig-paths": "^4.2.0",

Used Package Manager

yarn

Logs

Vite Logs

See google doc, it was too long to paste into the message body.

Cypress Console Log

Error seen in Cypress console:

SyntaxError: Unexpected token '{'

More detail by printing the Cypress log to the console log:

cypress_runner.js:190988 SyntaxError: The following error originated from your application code, not from Cypress.

  > Unexpected token '{'

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.
SyntaxError: The following error originated from your application code, not from Cypress.

  > Unexpected token '{'

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.
From previous event:
    at Object.run (http://localhost:3000/__cypress/runner/cypress_runner.js:182821:23)
    at Object.run (http://localhost:3000/__cypress/runner/cypress_runner.js:168727:17)
    at $Cy.cy.<computed> [as wait] (http://localhost:3000/__cypress/runner/cypress_runner.js:169897:19)
    at __stackReplacementMarker (http://localhost:3000/__cypress/runner/cypress_runner.js:169205:13)
    at Context.runnable.fn (http://localhost:3000/__cypress/runner/cypress_runner.js:170121:23)
    at callFn (http://localhost:3000/__cypress/runner/cypress_runner.js:122959:21)
    at Test.../driver/node_modules/mocha/lib/runnable.js.Runnable.run (http://localhost:3000/__cypress/runner/cypress_runner.js:122946:7)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:176663:30
From previous event:
    at Object.onRunnableRun (http://localhost:3000/__cypress/runner/cypress_runner.js:176648:19)
    at $Cypress.action (http://localhost:3000/__cypress/runner/cypress_runner.js:166202:28)
    at Test.Runnable.run (http://localhost:3000/__cypress/runner/cypress_runner.js:174382:13)
    at Runner.../driver/node_modules/mocha/lib/runner.js.Runner.runTest (http://localhost:3000/__cypress/runner/cypress_runner.js:123618:10)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:123744:12
    at next (http://localhost:3000/__cypress/runner/cypress_runner.js:123527:14)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:123537:7
    at next (http://localhost:3000/__cypress/runner/cypress_runner.js:123439:14)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:123505:5
    at timeslice (http://localhost:3000/__cypress/runner/cypress_runner.js:117431:27)

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.

github-actions[bot] commented 1 year ago

Hello @mosofsky. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

natematykiewicz commented 1 year ago

I'm having this same issue in Safari 16.3 using StimulusJS and vite-rails.

This typescript:

export default class extends Controller {
  static targets = ['menu']
}

Is being turned into this:

export default class extends Controller {
  static {
    this.targets = ["menu"];
  }
}

And Safari says SyntaxError: Unexpected token '{' about the static {.

natematykiewicz commented 1 year ago

I recently upgraded from 4.3.0 to 4.4.4. After doing a few downgrades, 4.3.9 works fine, but 4.4.0 produces this error.

ffxsam commented 1 year ago

We're getting this error as well, only in Safari 15 and earlier (in our Astro + Vue app). @mosofsky would you mind updating the title of this issue, since it's not just about Cypress? It affects production applications.

natematykiewicz commented 1 year ago

@ffxsam are you also using Typescript?

ffxsam commented 1 year ago

@natematykiewicz Yessir.

natematykiewicz commented 1 year ago

https://github.com/evanw/esbuild/blob/main/CHANGELOG.md#0180

I think this is the real problem: "TypeScript's target no longer affects esbuild's target" https://github.com/evanw/esbuild/issues/2628

But I can't figure out the right way to set the esbuild target via Vite.

natematykiewicz commented 1 year ago

I'm having this same issue in Safari 16.3 using StimulusJS and vite-rails.

This typescript:
export default class extends Controller {
  static targets = ['menu']
}
Is being turned into this:
export default class extends Controller {
  static {
    this.targets = ["menu"];
  }
}
And Safari says SyntaxError: Unexpected token '{' about the static {.

Under Vite 4.3.9 this Typescript becomes this:

export default class dropdown_menu_controller_default extends Controller {
}
dropdown_menu_controller_default.targets = ["menu"];

ffxsam commented 1 year ago

I can't tell what's going on in my situation. Our stack is Astro + Vue, and the Astro Vue integration depends on Vite 4.4.x. When I load up our app in Safari 15 or earlier, I get this:

natematykiewicz commented 1 year ago

What's your build target in tsconfig.json? Ours is es2015, and I'm assuming we're no longer getting es2015 with the esbuild 0.18 upgrade.

ffxsam commented 1 year ago

Since we have to support Safari (probably as early as version 12 or 13—ugh), our target is es2015 as well. We also import core-js/stable to polyfill all the things.

bluwy commented 1 year ago

Can someone help provide a repro for this? I made a stackblitz, but I can't quite repro the difference between Vite 4.3.9 and 4.4.0. Couple questions:

Is tsconfig.json compilerOptions.target set?
Is esbuild.target Vite config set?
Is the static property code coming from your source code or a dependency?

I think I have a fix, but I'm not sure what regression it's fixing. Also related https://github.com/vitejs/vite/issues/13756

"TypeScript's target no longer affects esbuild's target"

As noted in https://github.com/vitejs/vite/pull/13525:

This is not a breaking change for us. We always set esbuild's target so target in tsconfig was never used.

Which I can also confirm, that I'm not sure if we have a regression here.

ffxsam commented 1 year ago

So far I've been unable to put together a reproduction from scratch. So I think I'm gonna work the other way around: take my project, make a branch, and start cutting chunks away until the problem goes away. Then I'll have a better idea of how to create a reproduction—hopefully.

natematykiewicz commented 1 year ago

Yes. tsconfig.json

{
"compilerOptions": {
"target": "es2015",
"lib": [
  "dom",
  "dom.iterable",
  "es2015"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"noEmit": true,
"module": "esnext",
"sourceMap": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"downlevelIteration": true,
"allowSyntheticDefaultImports": true,
"noUnusedLocals": true,
"types": [
  "vite/client"
]
},
"include": [
"app/javascript/**/*.ts",
"vite.config.ts"
],
"exclude": [
"node_modules"
]
}

No. vite.config.ts


import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'

export default defineConfig({ plugins: [RubyPlugin()], })



3. My source code

bluwy commented 1 year ago

Re-opening since there seems to be a regression somewhere, but I'm still unsure how it happens.

@natematykiewicz Thanks for the response. IIUC the "target": "es2015" tsconfig setting shouldn't be respected in other versions of Vite too. If you use Vite 4.3.9 and set "target": "esnext" instead, would you get the same error too? If it does, that's really confusing to me 😅

natematykiewicz commented 1 year ago

Changing the compiler options target on 4.3.9 is definitely changing my output JS.

Given this typescript:

import { Controller } from '@hotwired/stimulus'
import { useClickOutside } from 'stimulus-use'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { enter, leave } from 'el-transition'

export default class extends Controller {
  static targets = ['menu']

  declare menuTarget: HTMLElement

  connect() {
    useClickOutside(this, { element: this.menuTarget })
  }

  show() {
    this.menuTarget.classList.remove('hidden')
    enter(this.menuTarget)
  }

  hide() {
    Promise.all([leave(this.menuTarget)]).then(() => {
      this.menuTarget.classList.add('hidden')
    })
  }

  toggle() {
    if (this.menuTarget.classList.contains('hidden')) {
      this.show()
    } else {
      this.hide()
    }
  }

  clickOutside() {
    this.hide()
  }
}

And this section of tsconfig.json:

{
  "compilerOptions": {
    "target": "es2015",
  }
}

es2015

import { Controller } from "/vite-dev/@fs/.../node_modules/.vite/deps/@hotwired_stimulus.js?v=11d7a1aa";
import { useClickOutside } from "/vite-dev/@fs/.../node_modules/.vite/deps/stimulus-use.js?v=11d7a1aa";
import { enter, leave } from "/vite-dev/@fs/.../node_modules/.vite/deps/el-transition.js?v=11d7a1aa";
export default class dropdown_menu_controller_default extends Controller {
    connect()
    {
        useClickOutside(this, {
            element: this.menuTarget
        });
    }
    show()
    {
        this.menuTarget.classList.remove("hidden");
        enter(this.menuTarget);
    }
    hide()
    {
        Promise.all([leave(this.menuTarget)]).then(() => {
            this.menuTarget.classList.add("hidden");
        });
    }
    toggle()
    {
        if (this.menuTarget.classList.contains("hidden")) {
            this.show();
        } else {
            this.hide();
        }
    }
    clickOutside()
    {
        this.hide();
    }
}
dropdown_menu_controller_default.targets = ["menu"];

esnext

import { Controller } from "/vite-dev/@fs/.../node_modules/.vite/deps/@hotwired_stimulus.js?v=11d7a1aa";
import { useClickOutside } from "/vite-dev/@fs/.../node_modules/.vite/deps/stimulus-use.js?v=11d7a1aa";
import { enter, leave } from "/vite-dev/@fs/.../node_modules/.vite/deps/el-transition.js?v=11d7a1aa";
export default class extends Controller {
  static targets = ["menu"];
  connect() {
    useClickOutside(this, { element: this.menuTarget });
  }
  show() {
    this.menuTarget.classList.remove("hidden");
    enter(this.menuTarget);
  }
  hide() {
    Promise.all([leave(this.menuTarget)]).then(() => {
      this.menuTarget.classList.add("hidden");
    });
  }
  toggle() {
    if (this.menuTarget.classList.contains("hidden")) {
      this.show();
    } else {
      this.hide();
    }
  }
  clickOutside() {
    this.hide();
  }
}

Omitting the compilerOptions:

import { Controller } from "/vite-dev/@fs/.../node_modules/.vite/deps/@hotwired_stimulus.js?v=11d7a1aa";
import { useClickOutside } from "/vite-dev/@fs/.../node_modules/.vite/deps/stimulus-use.js?v=11d7a1aa";
import { enter, leave } from "/vite-dev/@fs/.../node_modules/.vite/deps/el-transition.js?v=11d7a1aa";
export default class dropdown_menu_controller_default extends Controller {
    connect()
    {
        useClickOutside(this, {
            element: this.menuTarget
        });
    }
    show()
    {
        this.menuTarget.classList.remove("hidden");
        enter(this.menuTarget);
    }
    hide()
    {
        Promise.all([leave(this.menuTarget)]).then(() => {
            this.menuTarget.classList.add("hidden");
        });
    }
    toggle()
    {
        if (this.menuTarget.classList.contains("hidden")) {
            this.show();
        } else {
            this.hide();
        }
    }
    clickOutside()
    {
        this.hide();
    }
}
dropdown_menu_controller_default.targets = ["menu"];

It's worth noting, every time I change my tsconfig.json while my server is running, I see this log line:

3:48:41 PM [vite] changed tsconfig file detected: /my_path/tsconfig.json - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.

On Vite 4.4.7, with "es2015" the file is:

import { Controller } from "/vite-dev/@fs/.../node_modules/.vite/deps/@hotwired_stimulus.js?v=c8bdaac7";
import { useClickOutside } from "/vite-dev/@fs/.../node_modules/.vite/deps/stimulus-use.js?v=24b8e4a2";
import { enter, leave } from "/vite-dev/@fs/.../node_modules/.vite/deps/el-transition.js?v=b7575016";
export default class extends Controller {
  static {
    this.targets = ["menu"];
  }
  connect() {
    useClickOutside(this, { element: this.menuTarget });
  }
  show() {
    this.menuTarget.classList.remove("hidden");
    enter(this.menuTarget);
  }
  hide() {
    Promise.all([leave(this.menuTarget)]).then(() => {
      this.menuTarget.classList.add("hidden");
    });
  }
  toggle() {
    if (this.menuTarget.classList.contains("hidden")) {
      this.show();
    } else {
      this.hide();
    }
  }
  clickOutside() {
    this.hide();
  }
}

This errors. Safari does not seem to understand this part:

static {
}

I tried "esnext" and the file is:

import { Controller } from "/vite-dev/@fs/.../node_modules/.vite/deps/@hotwired_stimulus.js?v=a996cf86";
import { useClickOutside } from "/vite-dev/@fs/.../node_modules/.vite/deps/stimulus-use.js?v=a996cf86";
import { enter, leave } from "/vite-dev/@fs/.../node_modules/.vite/deps/el-transition.js?v=a996cf86";
export default class extends Controller {
  static targets = ["menu"];
  connect() {
    useClickOutside(this, { element: this.menuTarget });
  }
  show() {
    this.menuTarget.classList.remove("hidden");
    enter(this.menuTarget);
  }
  hide() {
    Promise.all([leave(this.menuTarget)]).then(() => {
      this.menuTarget.classList.add("hidden");
    });
  }
  toggle() {
    if (this.menuTarget.classList.contains("hidden")) {
      this.show();
    } else {
      this.hide();
    }
  }
  clickOutside() {
    this.hide();
  }
}

I tried a bunch of different values for compilerOptions target, and es2021 errors (same output as es2015), but es2022 works fine (same output as esnext).

This is so strange.

I'm sure it's obvious, but by updating Vite from 4.3 to 4.4, it also updated esbuild from 0.17 to 0.18.

bluwy commented 1 year ago

I've found the bug and opened https://github.com/vitejs/vite/pull/13992 to fix it. It was useDefineForClassFields that's causing the transpilation that I didn't see in the repro, which had that turned on to true. Setting it to false revealed it.

But it is still true that the target isn't what's Vite is transpiling to, the target just so happen to toggle the default value of useDefineForClassFields in Vite 4.3.9 that causes the issue.

ffxsam commented 1 year ago

@bluwy Awesome, thank you for the fix!!

About target: the whole purpose of tsconfig's target is to affect how the TS code is transpiled. Are you saying that Vite ignores this? Isn't that confusing, if folks are expecting the tsconfig target property to do something? If we change that to es2015, it does seem to actually work. But let me know if we're supposed to use build.target in the vite config instead—or update both the vite config & tsconfig.

Thanks!

bluwy commented 1 year ago

@ffxsam I've touched on that at https://github.com/vitejs/vite/issues/13756#issuecomment-1651103462. Maybe in future versions tsconfig target will affect TS, because I think that's a better default too. But for build.target, it's a build-only setting so it shouldn't affect dev. Most of the build.* options implicitly has this rule so we can't change that.

ffxsam commented 1 year ago

@bluwy Gotcha. It's strange, we're not specifying build.target, but just "target": "es2015" in tsconfig.json, and it's definitely transpiling for es2015. I suppose it wouldn't hurt to just set build: { target: 'es2015' } in addition to that, just to be safe?

bluwy commented 1 year ago

Yeah it'd be better to resort to the Vite configuration whenever possible, I'm not sure how it's picking up that es2015 config today though.

natematykiewicz commented 1 year ago

I was able to upgrade from 4.3.9 to 4.4.8 without any problems. So it looks like you fixed whatever was happening. Thanks!

I agree with ffxsam. I feel like I'm not configuring something right. I'm not setting any targets in my Vite config, but when I had tried, they didn't seem to help my problem.

ffxsam commented 1 year ago

I just tried build.target: "es2015" in the Vite config (for my Astro site), and it did not go well. 😅

Transforming async generator functions to the configured target environment ("es2015" + 2 overrides) is not supported yet
1297|  function isPromise(value) {
1298|    return !!value && typeof value === "object" && typeof value.then === "function";
1299|  }
   |    ^
1300|  async function* streamAsyncIterator(stream) {
   |  ^
1301|    const reader = stream.getReader();

Transforming async generator functions to the configured target environment ("es2015" + 2 overrides) is not supported yet
1786|    return typeof obj === "object" && !!obj[astroComponentInstanceSym];
1787|  }
1788|
   |   ^
1789|  async function* renderChild(child) {
   |  ^
1790|    child = await child;

These errors look like they're coming from third-party libraries, so I have no control over this.

vitejs / vite