From 8b48df223bf4b4bf1219378f3c115c144f542544 Mon Sep 17 00:00:00 2001 From: Eugene Datsky Date: Mon, 20 Jun 2022 16:04:09 +1000 Subject: [PATCH 1/3] Support missing import.meta.env --- packages/builder-vite/envs.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/builder-vite/envs.ts b/packages/builder-vite/envs.ts index e5ad6c50..665c5604 100644 --- a/packages/builder-vite/envs.ts +++ b/packages/builder-vite/envs.ts @@ -45,6 +45,9 @@ export function stringifyProcessEnvs(raw: EnvsRaw, envPrefix: UserConfig['envPre // support destructuring like // 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 + envs['import.meta.env.'] = '({}).'; return envs; } From 4dbafba42eaf3400fce0bccd0d506b36f2d5c231 Mon Sep 17 00:00:00 2001 From: Eugene Datsky Date: Wed, 22 Jun 2022 13:09:10 +1000 Subject: [PATCH 2/3] Only add "import.meta.env." replacement when building --- packages/builder-vite/envs.ts | 7 +++++-- packages/builder-vite/vite-server.ts | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/builder-vite/envs.ts b/packages/builder-vite/envs.ts index 665c5604..ed66f55f 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'], isBuild: boolean) { const updatedRaw: EnvsRaw = {}; const envs = Object.entries(raw).reduce( (acc: EnvsRaw, [key, value]) => { @@ -45,9 +45,12 @@ export function stringifyProcessEnvs(raw: EnvsRaw, envPrefix: UserConfig['envPre // support destructuring like // 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 - envs['import.meta.env.'] = '({}).'; + if (isBuild) { + envs['import.meta.env.'] = '({}).'; + } return envs; } diff --git a/packages/builder-vite/vite-server.ts b/packages/builder-vite/vite-server.ts index 8d098d6e..1fd6bd6c 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, false); // Update `define` finalConfig.define = { ...finalConfig.define, From e6a651febe37a06f720d21395906f0f8e3e53fd8 Mon Sep 17 00:00:00 2001 From: Eugene Datsky Date: Wed, 22 Jun 2022 14:49:59 +1000 Subject: [PATCH 3/3] Use string argument instead of boolean --- packages/builder-vite/build.ts | 2 +- packages/builder-vite/envs.ts | 4 ++-- packages/builder-vite/vite-server.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) 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 ed66f55f..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'], isBuild: boolean) { +export function stringifyProcessEnvs(raw: EnvsRaw, envPrefix: UserConfig['envPrefix'], command: 'build' | 'serve') { const updatedRaw: EnvsRaw = {}; const envs = Object.entries(raw).reduce( (acc: EnvsRaw, [key, value]) => { @@ -48,7 +48,7 @@ export function stringifyProcessEnvs(raw: EnvsRaw, envPrefix: UserConfig['envPre // 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 (isBuild) { + if (command === 'build') { envs['import.meta.env.'] = '({}).'; } diff --git a/packages/builder-vite/vite-server.ts b/packages/builder-vite/vite-server.ts index 1fd6bd6c..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, false); + const envs = stringifyProcessEnvs(envsRaw, finalConfig.envPrefix, 'serve'); // Update `define` finalConfig.define = { ...finalConfig.define,