Typescript error with Sveltekit environment variables: RollupError: "PUBLIC_XXX" is not exported by "$env/dynamic/public"

Question

I have this line of code in src/routes/+page.svelte

    import {PUBLIC_SUPABASE_KEY} from '$env/dynamic/public';

When this builds on CI, I get this error:

@cozemble/frontend-main-app:build: RollupError: "PUBLIC_SUPABASE_KEY" is not exported by "$env/dynamic/public", imported by "src/routes/+page.svelte".
@cozemble/frontend-main-app:build:     at error (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:1967:30)
@cozemble/frontend-main-app:build:     at Module.error (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:12962:16)
@cozemble/frontend-main-app:build:     at Module.traceVariable (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:13345:29)
@cozemble/frontend-main-app:build:     at ModuleScope.findVariable (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:11826:39)
@cozemble/frontend-main-app:build:     at FunctionScope.findVariable (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:6687:38)
@cozemble/frontend-main-app:build:     at ChildScope.findVariable (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:6687:38)
@cozemble/frontend-main-app:build:     at Identifier.bind (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:7782:40)
@cozemble/frontend-main-app:build:     at CallExpression.bind (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:5575:28)
@cozemble/frontend-main-app:build:     at CallExpression.bind (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:9299:15)
@cozemble/frontend-main-app:build:     at VariableDeclarator.bind (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:5579:23)
@cozemble/frontend-main-app:build:  ELIFECYCLE  Command failed with exit code 1.
@cozemble/frontend-main-app:build: ERROR: command finished with error: command (/Users/mikehogan/repos/personal/cozemble/monorepo/frontend/main-app) pnpm run build exited (1)

This SO question suggests that the right Typescripts get generated from a .env file when you run npm run check. But it is my understanding that .env files are NOT to be checked into CI.

So this really easy approach to env vars in SvelteKit is defeating me. What is the right approach?

Answer 1

You just have to set the variable to anything so it is picked up by SvelteKit.

This can be done any number of ways, e.g. by running a command before the build to set it. What that command should look like depends on the build platform. Or if you are using a build pipeline with a GUI you probably could set the variable there.