"Cannot import $env/static/private.js into client-side code" when importing from a common functions file

[flayks]

Describe the bug

This seems like a bug even though it could be the desired behaviour, but here I go:

Having a file functions.js including two functions:

1. fetchAPIthat supposedly fetches data from an API and requires access toAPI_TOKEN` (a private and sensitive environment variable)
2. multiply that just takes 2 parameters and returns a number, without access to the env variable

It then fire this error:

Cannot import $env/static/private.js into client-side code:
- src/routes/+page.svelte 
  - src/functions.ts 
    - $env/static/private.js 

If you comment the lines 2 and 8 of src/routes/+pages.svelte, then you have access to the information.

This sort of makes sense but since multiply does not use API_TOKEN, I don't see why we would have to separate functions into different files?

A solution could be to isolate the functions that require access to private environment variables. Or am I missing something here?

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-s8msqa?file=src/routes/+page.svelte

Logs

Error: Cannot import $env/static/private.js into client-side code:
- src/routes/+page.svelte 
  - src/functions.ts 
    - $env/static/private.js 
    at prevent_illegal_vite_imports (file:///Users/flayks/Desktop/sk/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/vite/utils.js:308:19)
    at Array.<anonymous> (file:///Users/flayks/Desktop/sk/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/vite/dev/index.js:92:8)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Promise.all (index 1)
    at async render_page (file:///Users/flayks/Desktop/sk/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:51:17)
    at async resolve (file:///Users/flayks/Desktop/sk/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/index.js:308:11)
    at async respond (file:///Users/flayks/Desktop/sk/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/index.js:202:20)
    at async file:///Users/flayks/Desktop/sk/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/vite/dev/index.js:396:22

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.64 
    @sveltejs/kit: next => 1.0.0-next.411 
    svelte: ^3.46.0 => 3.49.0 
    vite: ^3.0.0 => 3.0.8

Severity

serious, but I can work around it

Additional Information

Discord thread if that helps https://discord.com/channels/457912077277855764/1009108558194950174

[Conduitry]

Tracking what functions call what - or what functions use what data - is a whole lot more work than just tracing the import module graph, with very little worthwhile gain. I'm marking this as a documentation issue, but if there's not really a good way to convey this in the documentation without confusing more people than it helps, we shouldn't force it.

[danawoodman]

Perhaps the error could explain something to this effect? Something like:

"Ensure that no other exports in "path/to/file.ts" are imported into client code."

[Mark2M]

Just in case someone gets the same issue as me…. There’s something odd in the auto import functionality in VSCode. Not sure how I triggered it but after receiving the same error and scratching my head for a while I found a new import at the top of my +page.svelte like this:

import { _ } from ‘$env/static/private’;

Like I said, no idea how I triggered it but I’ve had similar problems with VSCode, or some add-in creating unwanted imports over the last few months.

[apvilkko]

Writing my observations here if anyone else is baffled by this issue. Naming matters, so don't name your function "serverFoo" in src/lib/serverFoo.ts if it's used also in client code.

[AnatoleT]

Just in case someone gets the same issue as me…. There’s something odd in the auto import functionality in VSCode. Not sure how I triggered it but after receiving the same error and scratching my head for a while I found a new import at the top of my +page.svelte like this:

import { _ } from ‘$env/static/private’;

Like I said, no idea how I triggered it but I’ve had similar problems with VSCode, or some add-in creating unwanted imports over the last few months.

You saved my day, VSC is really annoying for that :D

[ackmanx]

Got this today and the error seemed quite cryptic. My issue was related to how I was importing something.

/* Album.svelte */

// Crashes app with "cannot import $env/static/private into client-side code" error
import { AlbumEntity } from '$db/album-collection'

// Works perfectly fine, no errors
import type { AlbumEntity } from '$db/album-collection'

[TheBeachMaster]

This error is so annoying - it's just popped up out of nowhere, and I do not use any private variables.

Why cant there be a clear stack trace that points one to the actual source of the error?

This is such as bad DX.

3:56:59 AM [vite] Internal server error: Cannot import $env/static/private into client-side code
      at LoadPluginContext.load (file:///Users/thebeachmaster/git/<REDACTED>/portal/node_modules/@sveltejs/kit/src/exports/vite/index.js:401:12)
      at PluginContainer.load (file:///Users/thebeachmaster/git/<REDACTED>/portal/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:49002:17)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async loadAndTransform (file:///Users/thebeachmaster/git/<REDACTED>/portal/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:51807:22)
      at async viteTransformMiddleware (file:///Users/thebeachmaster/git/<REDACTED>/portal/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:61824:24)

What exactly am I supposed to get from this?

[omundy]

VS Code (or a Svelte plugin?) will automatically add import { _ } from '$env/static/private'; to your file if you type an underscore and then miss the autocomplete prompt and close the parentheses slug.set(_) - even if you fix it with your intended code slug.set(_slug). Deleting the import line fixes this issue but this "feature" is a little greedy if you ask me.