Vite: Error [SyntaxError]: Unexpected token: punc (.), During Build, when using optional chaining in the code

[ashubham]

Describe the bug

When using terser minification (Which is the default), and one has some optional chaining in the code. The build fails with the error:

Error [SyntaxError]: Unexpected token: punc (.)

This is because, terser does not support optional chaining and a few other es2020 features.

Reproduction

This is because we chaged esbuildservice.ts

https://github.com/vitejs/vite/blob/master/src/node/esbuildService.ts#L72

to always target es2020 which is not always correct. We should either make it configurable, or read it from the tsconfig file.

System Info

• required vite version: 1.0.0-beta.12
• required Operating System: OSX
• required Node version: 12.16.0

Logs (Optional if provided reproduction)

> 5985 |   const hasChart = data?.getAnswer.answer.visualizations.some((viz) => viz.__typename === "ChartViz");
       |                        ^ Unexpected token: punc (.)
  5986 |   const displayMode = data.getAnswer.answer.displayMode;
  5987 |   const suggestedDisplayMode = data?.getAnswer.answer.suggestedDisplayMode;
  5988 |   return {
[vite] Build errored out.
Error [SyntaxError]: Unexpected token: punc (.)
    at ee (/Users/ashish.shubham/thoughtspot/node_modules/terser/dist/bundle.min.js:1:19541)
    at c (/Users/ashish.shubham/thoughtspot/node_modules/terser/dist/bundle.min.js:1:28031)
    at l (/Users/ashish.shubham/thoughtspot/node_modules/terser/dist/bundle.min.js:1:28122)
    at f (/Users/ashish.shubham/thoughtspot/node_modules/terser/dist/bundle.min.js:1:28175)

[underfin]

Please upgrade rollup version and it already support optional chaining.See https://github.com/rollup/rollup/pull/3582

[ashubham]

@underfin this should not be closed. I am not using a separate roll-up build but vite to build the prod bundle. While it may be supported by roll-up its not supported by Terser which is the default minifier for vite:build.

https://github.com/terser/terser/issues/567

[underfin]

Hmmm. I realize it is not a bug for vite....

[hmaurer]

Making the esbuild target configurable would be great. @underfin would a PR be welcome?

[yyx990803]

Making the esbuild target configurable would be great. @underfin would a PR be welcome?

Yeah I think that would make sense.

[cypressious]

https://github.com/vitejs/vite/pull/155 fixed this until https://github.com/vitejs/vite/commit/893eeff4f6ef2134bd75f4e8623347ceab7ce229#diff-1526d74dec8e3f18e0222b9a56b98254 reverted the change.

[yyx990803]

There is actually currently no way to fix it in Vite because:

1. esbuild will forcefully transform import.meta into import_meta when target is lower than es2020 - which makes Vite's HMR API and env variable injections (both relying on import.meta) unusable;
2. But if we use target: es2020, it won't transpile optional chaining.
3. Terser can't handle optional chaining and looks like it will still take a while before it can be supported.

Basically, the way esbuild handles import.meta right now forces us to use target: es2020.

We have two options:

1. Ask esbuild to provide an option to not transpile import.meta even when target is lower than es2020. Maybe something more generic like ignoreUnsupportedFeatures.

2. Don't use optional chaining for now and wait until Terser supports it.

/cc @evanw

[evanw]

There are other possible target values too. For example, chrome79 would transform optional chaining but not import.meta because Chrome has supported import.meta since Chrome 64 but only started supporting optional chaining since Chrome 80. Would something like that work for you?

[cedeber]

I tried chrome79 and, at least for optional chaining, the build worked. 👍

[yyx990803]

@evanw thanks for the suggestion!

[cedeber]

🥳 Cool. Thanks. Do you make a rc2 from this one or do you want to wait fo more to come?

[yi-tuan]

Has this been solved? I also had problems when I was building.