diff --git a/packages/builder-vite/build.ts b/packages/builder-vite/build.ts index d0a36401..5929cc22 100644 --- a/packages/builder-vite/build.ts +++ b/packages/builder-vite/build.ts @@ -21,7 +21,7 @@ export async function build(options: ExtendedOptions) { const envsRaw = await presets.apply>('env'); // Stringify env variables after getting `envPrefix` from the final config - const envs = stringifyProcessEnvs(envsRaw, finalConfig.envPrefix); + const envs = stringifyProcessEnvs(envsRaw, finalConfig.envPrefix, 'build'); // Update `define` finalConfig.define = { ...finalConfig.define, diff --git a/packages/builder-vite/envs.ts b/packages/builder-vite/envs.ts index e5ad6c50..83d592e3 100644 --- a/packages/builder-vite/envs.ts +++ b/packages/builder-vite/envs.ts @@ -22,7 +22,7 @@ export const allowedEnvPrefix = ['VITE_', 'STORYBOOK_']; * Customized version of stringifyProcessEnvs from @storybook/core-common which * uses import.meta.env instead of process.env and checks for allowed variables. */ -export function stringifyProcessEnvs(raw: EnvsRaw, envPrefix: UserConfig['envPrefix']) { +export function stringifyProcessEnvs(raw: EnvsRaw, envPrefix: UserConfig['envPrefix'], command: 'build' | 'serve') { const updatedRaw: EnvsRaw = {}; const envs = Object.entries(raw).reduce( (acc: EnvsRaw, [key, value]) => { @@ -46,5 +46,11 @@ export function stringifyProcessEnvs(raw: EnvsRaw, envPrefix: UserConfig['envPre // const { foo } = import.meta.env; envs['import.meta.env'] = JSON.stringify(stringifyEnvs(updatedRaw)); + // Prevent build breaking on a missing var, similar to vite + // @see https://github.com/vitejs/vite/blob/908c9e4cdd2cceb0f01495e38066ffe33c21ddb8/packages/vite/src/node/plugins/define.ts#L50 + if (command === 'build') { + envs['import.meta.env.'] = '({}).'; + } + return envs; } diff --git a/packages/builder-vite/vite-server.ts b/packages/builder-vite/vite-server.ts index 8d098d6e..54c6b4e7 100644 --- a/packages/builder-vite/vite-server.ts +++ b/packages/builder-vite/vite-server.ts @@ -29,7 +29,7 @@ export async function createViteServer(options: ExtendedOptions, devServer: Serv const envsRaw = await presets.apply>('env'); // Stringify env variables after getting `envPrefix` from the final config - const envs = stringifyProcessEnvs(envsRaw, finalConfig.envPrefix); + const envs = stringifyProcessEnvs(envsRaw, finalConfig.envPrefix, 'serve'); // Update `define` finalConfig.define = { ...finalConfig.define,