If import.meta.env gets injected into files from node_modules deps, the file should not be cached in dev mode

[smeng9]

Describe the bug

I am updating my .env file which has some VITE_ prefixed variables.

I expect my changes to be reflected on frontend immediately.

However the cache control caused some issues and I am still using an older value in import.meta.env

This bug does not involve HMR.

Reproduction

https://stackblitz.com/edit/vitejs-vite-mnvdha?file=my_package%2Findex.js&terminal=dev

Steps to reproduce

Clone the project from above reproduction link.

Run yarn install then followed by yarn dev.

Open the browser and visit the page http://localhost:5173

Close the browser

Close the yarn dev server by using Ctrl+C

use editor to edit the value in .env.development and save.

run yarn dev

Open the browser and visit the page http://localhost:5173

You will find count is xxx is using the old value.

The outdated import.meta.env caused some really hard to debug problem and we eventually found out to be cache issue.
Note: to reproduce you must closed both the browser and the server before editing the file without triggering HMR.
The issue seems only happens when file in node_modules uses import.meta.env because it is (incorrectly) optimized for caching.

The related code is

vite/packages/vite/src/node/server/middlewares/transform.ts

Line 209 in 7b240e4

cacheControl: isDep ? 'max-age=31536000,immutable' : 'no-cache',

We should either pull the import.meta.env object out of this file, so this file can be safely cached.
Or we must have a separate check of result.code to see if it matches the pattern of import.meta.env and set to no-cache because it may be mutable.

Workaround: only modify .env file while the server is open and hope HMR will catch it, or every time use incognito mode to get a fresh environment without cache.

System Info

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M2
    Memory: 73.06 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - /usr/local/bin/node
    Yarn: 4.3.0 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
  Browsers:
    Safari: 17.4.1

Used Package Manager

yarn

Logs

vite:config no config file found. +0ms
vite:config using resolved config: {
vite:config root: '/Users/root/Downloads/vitejs-vite-mnvdha',
vite:config base: '/',
vite:config mode: 'development',
vite:config configFile: undefined,
vite:config logLevel: undefined,
vite:config clearScreen: undefined,
vite:config optimizeDeps: {
vite:config holdUntilCrawlEnd: true,
vite:config force: undefined,
vite:config esbuildOptions: { preserveSymlinks: false }
vite:config },
vite:config server: {
vite:config preTransformRequests: true,
vite:config host: undefined,
vite:config sourcemapIgnoreList: [Function: isInNodeModules$1],
vite:config middlewareMode: false,
vite:config fs: {
vite:config strict: true,
vite:config allow: [Array],
vite:config deny: [Array],
vite:config cachedChecks: undefined
vite:config }
vite:config },
vite:config configFileDependencies: [],
vite:config inlineConfig: {
vite:config root: undefined,
vite:config base: undefined,
vite:config mode: undefined,
vite:config configFile: undefined,
vite:config logLevel: undefined,
vite:config clearScreen: undefined,
vite:config optimizeDeps: { force: undefined },
vite:config server: { host: undefined }
vite:config },
vite:config rawBase: '/',
vite:config resolve: {
vite:config mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ],
vite:config conditions: [],
vite:config extensions: [
vite:config '.mjs', '.js',
vite:config '.mts', '.ts',
vite:config '.jsx', '.tsx',
vite:config '.json'
vite:config ],
vite:config dedupe: [],
vite:config preserveSymlinks: false,
vite:config alias: [ [Object], [Object] ]
vite:config },
vite:config publicDir: '/Users/root/Downloads/vitejs-vite-mnvdha/public',
vite:config cacheDir: '/Users/root/Downloads/vitejs-vite-mnvdha/node_modules/.vite',
vite:config command: 'serve',
vite:config ssr: {
vite:config target: 'node',
vite:config optimizeDeps: { noDiscovery: true, esbuildOptions: [Object] }
vite:config },
vite:config isWorker: false,
vite:config mainConfig: null,
vite:config bundleChain: [],
vite:config isProduction: false,
vite:config plugins: [
vite:config 'vite:optimized-deps',
vite:config 'vite:watch-package-data',
vite:config 'vite:pre-alias',
vite:config 'alias',
vite:config 'vite:modulepreload-polyfill',
vite:config 'vite:resolve',
vite:config 'vite:html-inline-proxy',
vite:config 'vite:css',
vite:config 'vite:esbuild',
vite:config 'vite:json',
vite:config 'vite:wasm-helper',
vite:config 'vite:worker',
vite:config 'vite:asset',
vite:config 'vite:wasm-fallback',
vite:config 'vite:define',
vite:config 'vite:css-post',
vite:config 'vite:worker-import-meta-url',
vite:config 'vite:asset-import-meta-url',
vite:config 'vite:dynamic-import-vars',
vite:config 'vite:import-glob',
vite:config 'vite:client-inject',
vite:config 'vite:css-analysis',
vite:config 'vite:import-analysis'
vite:config ],
vite:config css: { lightningcss: undefined },
vite:config esbuild: { jsxDev: true },
vite:config build: {
vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
vite:config outDir: 'dist',
vite:config assetsDir: 'assets',
vite:config assetsInlineLimit: 4096,
vite:config cssCodeSplit: true,
vite:config sourcemap: false,
vite:config rollupOptions: {},
vite:config minify: 'esbuild',
vite:config terserOptions: {},
vite:config write: true,
vite:config emptyOutDir: null,
vite:config copyPublicDir: true,
vite:config manifest: false,
vite:config lib: false,
vite:config ssr: false,
vite:config ssrManifest: false,
vite:config ssrEmitAssets: false,
vite:config reportCompressedSize: true,
vite:config chunkSizeWarningLimit: 500,
vite:config watch: null,
vite:config commonjsOptions: { include: [Array], extensions: [Array] },
vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
vite:config modulePreload: { polyfill: true },
vite:config cssMinify: true
vite:config },
vite:config preview: {
vite:config port: undefined,
vite:config strictPort: undefined,
vite:config host: undefined,
vite:config https: undefined,
vite:config open: undefined,
vite:config proxy: undefined,
vite:config cors: undefined,
vite:config headers: undefined
vite:config },
vite:config envDir: '/Users/root/Downloads/vitejs-vite-mnvdha',
vite:config env: {
vite:config VITE_VAR: 'ertyrety',
vite:config BASE_URL: '/',
vite:config MODE: 'development',
vite:config DEV: true,
vite:config PROD: false
vite:config },
vite:config assetsInclude: [Function: assetsInclude],
vite:config logger: {
vite:config hasWarned: false,
vite:config info: [Function: info],
vite:config warn: [Function: warn],
vite:config warnOnce: [Function: warnOnce],
vite:config error: [Function: error],
vite:config clearScreen: [Function: clearScreen],
vite:config hasErrorLogged: [Function: hasErrorLogged]
vite:config },
vite:config packageCache: Map(1) {
vite:config 'fnpd_/Users/root/Downloads/vitejs-vite-mnvdha' => {
vite:config dir: '/Users/root/Downloads/vitejs-vite-mnvdha',
vite:config data: [Object],
vite:config hasSideEffects: [Function: hasSideEffects],
vite:config webResolvedImports: {},
vite:config nodeResolvedImports: {},
vite:config setResolvedCache: [Function: setResolvedCache],
vite:config getResolvedCache: [Function: getResolvedCache]
vite:config },
vite:config set: [Function (anonymous)]
vite:config },
vite:config createResolver: [Function: createResolver],
vite:config worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} },
vite:config appType: 'spa',
vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
vite:config getSortedPlugins: [Function: getSortedPlugins],
vite:config getSortedPluginHooks: [Function: getSortedPluginHooks]
vite:config } +1s
vite:deps Hash is consistent. Skipping. Use --force to override. +0ms

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 vuejs/core 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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-mnvdha (Open reproduction)

[smeng9]

[ArnaudBarre]

Closing because we don't want to encourage people using Vite specific API in node_modules.

The solution is to exclude the deps from pre-bundling to be treated more like user code: https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-exclude