From 43fe7232eb0745b05ce72ef8ec8c6685e9f657cb Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Tue, 18 Jul 2023 10:15:09 +0200 Subject: [PATCH 1/5] Expose environment variables also on import.env.meta --- packages/vite/src/index.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts index d53c944de08d..c5a1191a13a4 100644 --- a/packages/vite/src/index.ts +++ b/packages/vite/src/index.ts @@ -109,6 +109,22 @@ export default function redwoodPluginVite(): PluginOption[] { process.env.REDWOOD_ENV_EDITOR ), }, + ...Object.fromEntries( + rwConfig.web.includeEnvironmentVariables.map((envName) => [ + `import.meta.env.${envName}`, + process.env[envName], + ]) + ), + ...Object.entries(process.env).reduce>( + (acc, [key, value]) => { + if (key.startsWith('REDWOOD_ENV_')) { + acc[`import.meta.env.${key}`] = value + } + + return acc + }, + {} + ), }, css: { // @NOTE config path is relative to where vite.config.js is if you use relative path From 6a4b784ace55eb56c470021eb655803a1b9963e3 Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Tue, 18 Jul 2023 11:28:04 +0200 Subject: [PATCH 2/5] Comment code --- packages/vite/src/index.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts index c5a1191a13a4..907a517e8fa4 100644 --- a/packages/vite/src/index.ts +++ b/packages/vite/src/index.ts @@ -109,6 +109,13 @@ export default function redwoodPluginVite(): PluginOption[] { process.env.REDWOOD_ENV_EDITOR ), }, + // Vite can automatically expose environment variables, but we + // disable that in `buildFeServer.ts` by setting `envFile: false` + // because we want to use our own logic for loading .env, + // .env.defaults, etc + // The two object spreads below will expose all environment + // variables listed in redwood.toml and all environment variables + // prefixed with REDWOOD_ENV_ ...Object.fromEntries( rwConfig.web.includeEnvironmentVariables.map((envName) => [ `import.meta.env.${envName}`, From c230cf9218822a10dc75fb1359fb81e4d2d3600a Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Tue, 18 Jul 2023 15:20:26 +0200 Subject: [PATCH 3/5] JSON.stringify --- packages/vite/src/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts index 907a517e8fa4..94a867be6d3e 100644 --- a/packages/vite/src/index.ts +++ b/packages/vite/src/index.ts @@ -119,13 +119,13 @@ export default function redwoodPluginVite(): PluginOption[] { ...Object.fromEntries( rwConfig.web.includeEnvironmentVariables.map((envName) => [ `import.meta.env.${envName}`, - process.env[envName], + JSON.stringify(process.env[envName]), ]) ), ...Object.entries(process.env).reduce>( (acc, [key, value]) => { if (key.startsWith('REDWOOD_ENV_')) { - acc[`import.meta.env.${key}`] = value + acc[`import.meta.env.${key}`] = JSON.stringify(value) } return acc From 3b548f29ea43023a4beb8ab1db3f56363b959376 Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Tue, 18 Jul 2023 23:27:14 +0200 Subject: [PATCH 4/5] Add to both process.env and import.meta.env --- packages/vite/src/index.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts index 37ec7cd413a2..870ea0965cb7 100644 --- a/packages/vite/src/index.ts +++ b/packages/vite/src/index.ts @@ -117,15 +117,22 @@ export default function redwoodPluginVite(): PluginOption[] { // variables listed in redwood.toml and all environment variables // prefixed with REDWOOD_ENV_ ...Object.fromEntries( - rwConfig.web.includeEnvironmentVariables.map((envName) => [ - `import.meta.env.${envName}`, - JSON.stringify(process.env[envName]), + rwConfig.web.includeEnvironmentVariables.flatMap((envName) => [ + [ + `import.meta.env.${envName}`, + JSON.stringify(process.env[envName]), + ], + [ + `process.env.${envName}`, + JSON.stringify(process.env[envName]), + ], ]) ), ...Object.entries(process.env).reduce>( (acc, [key, value]) => { if (key.startsWith('REDWOOD_ENV_')) { acc[`import.meta.env.${key}`] = JSON.stringify(value) + acc[`process.env.${key}`] = JSON.stringify(value) } return acc From 134ad10aac1a5253c784f09100dc116567564e7f Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Wed, 19 Jul 2023 08:13:24 +0200 Subject: [PATCH 5/5] Remove unneeded env plugin --- packages/vite/package.json | 1 - packages/vite/src/index.ts | 93 ++++++++++++++++---------------------- yarn.lock | 10 ---- 3 files changed, 39 insertions(+), 65 deletions(-) diff --git a/packages/vite/package.json b/packages/vite/package.json index 08652b9e24db..59531ab8f3fa 100644 --- a/packages/vite/package.json +++ b/packages/vite/package.json @@ -71,7 +71,6 @@ "react": "18.3.0-canary-035a41c4e-20230704", "react-server-dom-webpack": "18.3.0-canary-035a41c4e-20230704", "vite": "4.4.4", - "vite-plugin-environment": "1.1.3", "yargs-parser": "21.1.1" }, "devDependencies": { diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts index 870ea0965cb7..660084d318a5 100644 --- a/packages/vite/src/index.ts +++ b/packages/vite/src/index.ts @@ -4,7 +4,6 @@ import path from 'path' import react from '@vitejs/plugin-react' import type { ConfigEnv, UserConfig, PluginOption } from 'vite' import { normalizePath } from 'vite' -import EnvironmentPlugin from 'vite-plugin-environment' import { getWebSideDefaultBabelConfig } from '@redwoodjs/internal/dist/build/babel/web' import { getConfig, getPaths } from '@redwoodjs/project-config' @@ -29,6 +28,45 @@ export default function redwoodPluginVite(): PluginOption[] { const relativeEntryPath = path.relative(rwPaths.web.src, clientEntryPath) return [ + { + name: 'redwood-plugin-vite-html-env', + + // Vite can support replacing environment variables in index.html but + // there are currently two issues with that: + // 1. It requires the environment variables to be exposed on + // `import.meta.env`, but we expose them on `process.env` in Redwood. + // 2. There's an open issue on Vite where it adds extra quotes around + // the replaced values, which breaks trying to use environment + // variables in src attributes for example. + // Until those issues are resolved, we'll do the replacement ourselves + // instead using transformIndexHtml. Doing it this was was also the + // recommended way until Vite added built-in support for it. + // + // Extra quotes issue: https://github.com/vitejs/vite/issues/13424 + // transformIndexHtml being the recommended way: + // https://github.com/vitejs/vite/issues/3105#issuecomment-1059975023 + transformIndexHtml: { + // Setting order: 'pre' so that it runs before the built-in + // html env replacement. + order: 'pre', + handler: (html: string) => { + let newHtml = html + + rwConfig.web.includeEnvironmentVariables.map((envName) => { + newHtml = newHtml.replaceAll( + `%${envName}%`, + process.env[envName] || '' + ) + }) + + Object.entries(process.env).forEach(([envName, value]) => { + newHtml = newHtml.replaceAll(`%${envName}%`, value || '') + }) + + return newHtml + }, + }, + }, { name: 'redwood-plugin-vite', @@ -220,20 +258,6 @@ export default function redwoodPluginVite(): PluginOption[] { } }, }, - // Loading Environment Variables, to process.env in the browser - // This maintains compatibility with Webpack. We can choose to switch to import.meta.env at a later stage - EnvironmentPlugin('all', { prefix: 'REDWOOD_ENV_', loadEnvFiles: false }), - EnvironmentPlugin( - Object.fromEntries( - rwConfig.web.includeEnvironmentVariables.map((envName) => [ - envName, - JSON.stringify(process.env[envName]), - ]) - ), - { - loadEnvFiles: false, // to prevent vite from loading .env files - } - ), // ----------------- handleJsAsJsx(), react({ @@ -243,44 +267,5 @@ export default function redwoodPluginVite(): PluginOption[] { }), }, }), - { - name: 'redwood-plugin-vite-html-env', - - // Vite can support replacing environment variables in index.html but - // there are currently two issues with that: - // 1. It requires the environment variables to be exposed on - // `import.meta.env`, but we expose them on `process.env` in Redwood. - // 2. There's an open issue on Vite where it adds extra quotes around - // the replaced values, which breaks trying to use environment - // variables in src attributes for example. - // Until those issues are resolved, we'll do the replacement ourselves - // instead using transformIndexHtml. Doing it this was was also the - // recommended way until Vite added built-in support for it. - // - // Extra quotes issue: https://github.com/vitejs/vite/issues/13424 - // transformIndexHtml being the recommended way: - // https://github.com/vitejs/vite/issues/3105#issuecomment-1059975023 - transformIndexHtml: { - // Setting order: 'pre' so that it runs before the built-in - // html env replacement. - order: 'pre', - handler: (html: string) => { - let newHtml = html - - rwConfig.web.includeEnvironmentVariables.map((envName) => { - newHtml = newHtml.replaceAll( - `%${envName}%`, - process.env[envName] || '' - ) - }) - - Object.entries(process.env).forEach(([envName, value]) => { - newHtml = newHtml.replaceAll(`%${envName}%`, value || '') - }) - - return newHtml - }, - }, - }, ] } diff --git a/yarn.lock b/yarn.lock index 60ef5bb6d94f..707ef347f715 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8261,7 +8261,6 @@ __metadata: react-server-dom-webpack: 18.3.0-canary-035a41c4e-20230704 typescript: 5.1.6 vite: 4.4.4 - vite-plugin-environment: 1.1.3 yargs-parser: 21.1.1 bin: rw-dev-fe: ./dist/devFeServer.js @@ -31289,15 +31288,6 @@ __metadata: languageName: node linkType: hard -"vite-plugin-environment@npm:1.1.3": - version: 1.1.3 - resolution: "vite-plugin-environment@npm:1.1.3" - peerDependencies: - vite: ">= 2.7" - checksum: 225986450220bdc6b109be4d05deeb94013d41cc235fe3064bd6c5a1b33c047ba59cac3a34aa240ae735fee6a77ab9ce033053c5ab7c152497bd7136bd3f3a6d - languageName: node - linkType: hard - "vite@npm:4.4.4": version: 4.4.4 resolution: "vite@npm:4.4.4"