Issue with Vite v5

[SebastienGllmt]

I found that this plugin no longer works in Vite v5. Notably, according to their docs about how they changed define, esbuild is now used to manage environment variables during build this.

Notably, this seams to mean

export default defineConfig({
  plugins: [EnvironmentPlugin('all')],

No longer works, and instead I had to add to esbuildOptions instead

optimizeDeps: {
    esbuildOptions: {
      define: {
        // add envs here (can't use vite-plugin-environment for this)
      },
   }
}

[ElMassimo]

define is still supported in Vite 5.

I've updated the test setup to run with Vite 5, and tests continue to pass.

Please provide a minimal example that used to work in Vite 4 and no longer works in Vite 5.

[ElMassimo]

Sorry, accidentally hit close with comment.

[SebastienGllmt]

I think I figured out what is happening with this. Vite handles dependencies and code you wrote separately. Notably, Vite uses dependency pre-bundling to bundle any package you have separately from the code in your own package.

vite-plugin-environment works as expected for any code in the package you author yourself. However, it does not set process.env during the pre-bundling stage. Conversely, the solution I proposed in the original post of this issue has the opposite behavior - it only adds the process.env variables during the pre-bundling stage (hence the optimizeDeps key)

Therefore, to have your process.env properly setup you need both this package (for your own code) and setting the esbuildOptions (for dependencies)

Of note, this only matters for development builds because dep-prebundling is only done using esbuild for dev builds (@rollup/plugin-commonjs is used instead for production builds)

Here is code I wrote for the esbuild define in case it's useful to anyone

// 1) Setup process.env so it's visible from dependencies during the Vite pre-build step
import { config } from 'dotenv';
config({ path: `${process.cwd()}/../../.env` });

const envVarsToInclude = [
    // put the ENV vars you want to expose here
    'FOO'
];
// you'll need to update these map entries for any default or optional values
const esbuildEnvs = Object.fromEntries(envVarsToInclude .map(key => [`process.env.${key}`, JSON.stringify(process.env[key])]));

// 2) Setup process.env so it's visible from files in your own project
// you'll need to update these map entries for any default or optional values
const viteEnvMap: EnvVarDefaults = Object.fromEntries(
  envVarsToInclude.map(entry => [entry, undefined])
);

// https://vitejs.dev/config/
export default defineConfig({
  // in combination with the EnvironmentPlugin makes process.env available and loads everything from .env
  // additionally loads .env.foo (or other name) based on the --mode argument to vite
  envDir: '../..',
  plugins: [EnvironmentPlugin(viteEnvMap)],
  optimizeDeps: {
    esbuildOptions: {
      define: {
        ...esbuildEnvs,
      },
  },
});

It could be good for the docs for this project to mention this, or to add functionality to handle both these cases for you