Regression: Optimized dependencies in 2.6.x cannot access import.meta

[frandiox]

Describe the bug

Dependencies optimized by Vite are getting a hardcoded empty object instead of import.meta since 2.6.0-beta.0. This means such dependencies cannot access import.meta.hot API or any environment variable like import.meta.env.SSR.

This is a workaround implemented in vite-ssr. However, I hit a wall when trying to workaround import.meta.hot.on(...) in Vitedge :/

Thanks!

Reproduction

https://github.com/frandiox/vite-260-meta-issue

System Info

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 152.89 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.18.0 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.15 - /usr/local/bin/npm
    Watchman: 2021.09.06.00 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 91.1.25.72
    Chrome: 94.0.4606.71
    Edge: 94.0.992.47
    Firefox: 89.0.2
    Safari: 15.0
  npmPackages:
    vite: 2.6.7 => 2.6.7

Used Package Manager

yarn

Logs

No response

Validations

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

[calebbergman]

I posted this on the Vue Land Discord under [#Tools -> Vite] just yesterday. I have a feeling they're related 😅

Discord post

I have a small Vue 2 + @vue/composition-api component bundled with rollup. Within setup() is a function that attempts to access import.meta to construct a URL for an image in a local assets directory. This is all bundled as an npm package.

setup() {
  const getPath = (name: string) => new URL(name, import.meta.url).href
  return {
    getPath
  }
}

I have a Vue 2 + vite application with the above npm package installed as a dependency. When installed locally as a file: reference everything works great (debugging; I didn't try building). When I published the package and installed it normally, now import.meta is an empty object with no url property; url is undefined and new URL() explodes (also just debugging).

import.meta properly logs to the console as an object with a url property from a <script type="module"> in index.html.

Is there an easy explanation as to why import.meta would be an empty object within the bundled node module, but not from a script module defined on index.html? I can only assume vite is doing something, but ¯\(ツ)/¯

[nrgnrg]

I'm also running into this, looks like the regression was introduced in 2.6.0-beta.3

[gaomeng1900]

This is caused by the esbuild target config. import.meta is a es2020 feature but vite@2 set default target under es2019. The following will fix this issue.

module.exports = defineConfig({
	optimizeDeps: {
		esbuildOptions: {
			target: 'es2020',
		},
	},
})

Remind you that this will also happen in production mode. You will always have to set esbuild target manually.

Which is ridiculous because this usage is right in the official document but not supported by default.

I would recommend vite to upgrade its esbuild config. Even esbuild use es2020 by default. Why downgrade it?

[gaomeng1900]

PR #7279