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._
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?
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.