Vite: import.meta doesn't work with esbuild since 0.5.17

Created on 3 Jul 2020  路  2Comments  路  Source: vitejs/vite

When you upgrade your yarn.lock by yarn upgrade, the esbuild is upgraded to latest version: 0.5.19.
That introduces a bug where you are not anymore able to use import.meta.

The object import.meta is empty, even when .env is set and loaded properly.
My solution was to find esbuild in yarn.lock and replace it for older version:

esbuild@^0.5.3:
  version "0.5.9"
  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.5.9.tgz#122446c4db6cd24f128332e1872f41896ce1aa76"
  integrity sha512-ZCA8DRDroE4qDnT2eqtaAA4zsgSzS5H4gCAYUMcELn/ytIjkWud+l+363BHKohXfo5rZfl3DMynEWD4/XFA00w==

When developer uses the latest:

esbuild@^0.5.11:
  version "0.5.19"
  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.5.19.tgz#00daed3290407e87347266ed285ef4ce86040f13"
  integrity sha512-QiK0BCLPemNO9zziNOFudQbtNnEax/x8faBfbtEtfhb53gNk0H5J10uFrzmJef1P379VrP66BZpc02iqBuM/+g==

He will start getting warnings:

[vite] warnings while transforming /src/testScript.ts with esbuild:
"import.meta" is from ES2020 and will be empty when targeting ES2019
50 |        if(import.meta.env.DEV) {
   |           ^
51 |          throw new Error("Not implemented yet")
52 |        }

Even when tsconfig.json doesn't exist or module and target are set to ESNext.

It must be related to this issue: https://github.com/evanw/esbuild/issues/208


Is there any way how to support import.meta from esbuild?

_it took me few hours to find why the import.meta is not working, so I believe opening this issue will help other developers to find this issue too._

pending triage

Most helpful comment

The warning is saying that esbuild is configured with ES2019 as the target instead of ES2020. The import.meta syntax is an ES2020 feature, so it's transformed when the target is ES2019 to avoid causing a syntax error in browsers that don't support it.

It looks like the esbuild target for Vite was lowered to ES2019 because at the time Rollup didn't support optional chaining (an ES2020 feature): https://github.com/vitejs/vite/pull/155. However, I believe Rollup has since added support for optional chaining: https://github.com/rollup/rollup/pull/3582. So perhaps the ES2019 target is no longer necessary? Raising the target to ES2020 should fix this issue.

All 2 comments

The warning is saying that esbuild is configured with ES2019 as the target instead of ES2020. The import.meta syntax is an ES2020 feature, so it's transformed when the target is ES2019 to avoid causing a syntax error in browsers that don't support it.

It looks like the esbuild target for Vite was lowered to ES2019 because at the time Rollup didn't support optional chaining (an ES2020 feature): https://github.com/vitejs/vite/pull/155. However, I believe Rollup has since added support for optional chaining: https://github.com/rollup/rollup/pull/3582. So perhaps the ES2019 target is no longer necessary? Raising the target to ES2020 should fix this issue.

You are right. I haven't notice that Vite is setting explicitly ES2019 in the plugin.

Thought it is loaded from tsconfig.json, so it is definitely Vite's issue.


If vite is not planning to change it to ES2020 or ESNext, can we please at least have option to set the target from vite.config?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

maxxcs picture maxxcs  路  3Comments

duanxianze picture duanxianze  路  3Comments

wobsoriano picture wobsoriano  路  4Comments

haikyuu picture haikyuu  路  3Comments

robrich picture robrich  路  4Comments