Vite global constant replacement not defined

[JeremieBourque1]

Describe the bug

When I try to include a global constant defined in Vite inside of a Svelte file, I get warnings saying that the constant is not defined. However, everything still works fine when I build the app and preview it.

In my case I want to show the version and build numbers of the app in the index page. I defined these numbers to as a global constant in Vite in the file svelte.config.js. I then use this constant in the file index.svelte.

Reproduction

1. Download the project
2. Build the app with npm run build
3. You will see the warnings in the build log
4. Preview the app with npm run preview
5. You will see that

Logs

vite v2.9.9 building for production...
transforming (3) .svelte-kit\runtime\client\start.js9:45:41 a.m. [vite-plugin-svelte] C:/Users/user570/Documents/dev/sveltekit_bug/src/routes/index.svelte:3:13 '__VERSION__' is not defined. Consider adding a <script> block with 'export let __VERSION__' to declare a prop
1: <h1>Welcome to SvelteKit</h1>
2: <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
3: <p>Version: {__VERSION__.version}</p>
                ^
4: <p>Build: {__VERSION__.build}</p>
5: 
9:45:41 a.m. [vite-plugin-svelte] C:/Users/user570/Documents/dev/sveltekit_bug/src/routes/index.svelte:4:11 '__VERSION__' is not defined. Consider adding a <script> block with 'export let __VERSION__' to declare a prop
2: <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
3: <p>Version: {__VERSION__.version}</p>
4: <p>Build: {__VERSION__.build}</p>
              ^
5: 
✓ 13 modules transformed.
.svelte-kit/output/client/_app/manifest.json                    1.14 KiB
.svelte-kit/output/client/_app/layout.svelte-7407ee32.js        0.53 KiB / gzip: 0.35 KiB 
.svelte-kit/output/client/_app/start-dbaaba43.js                23.13 KiB / gzip: 8.67 KiB
.svelte-kit/output/client/_app/error.svelte-00c4e143.js         1.56 KiB / gzip: 0.75 KiB 
.svelte-kit/output/client/_app/chunks/index-c3650d4a.js         6.84 KiB / gzip: 2.79 KiB 
.svelte-kit/output/client/_app/pages/index.svelte-477a5450.js   1.14 KiB / gzip: 0.61 KiB 
vite v2.9.9 building SSR bundle for production...
transforming (1) .svelte-kit\build\index.js9:45:42 a.m. [vite-plugin-svelte] C:/Users/user570/Documents/dev/sveltekit_bug/src/routes/index.svelte:3:13 '__VERSION__' is not defined. Consider adding a <script> block with 'export let __VERSION__' to declare a prop
1: <h1>Welcome to SvelteKit</h1>
2: <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
3: <p>Version: {__VERSION__.version}</p>
                ^
4: <p>Build: {__VERSION__.build}</p>
5:
9:45:42 a.m. [vite-plugin-svelte] C:/Users/user570/Documents/dev/sveltekit_bug/src/routes/index.svelte:4:11 '__VERSION__' is not defined. Consider adding a <script> block with 'export let __VERSION__' to declare a prop      
2: <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
3: <p>Version: {__VERSION__.version}</p>
4: <p>Build: {__VERSION__.build}</p>
              ^
5:
✓ 11 modules transformed.
Generated an empty chunk: "hooks"
.svelte-kit/output/server/manifest.json                        1.09 KiB
.svelte-kit/output/server/index.js                             75.62 KiB
.svelte-kit/output/server/entries/fallbacks/layout.svelte.js   0.24 KiB
.svelte-kit/output/server/entries/fallbacks/error.svelte.js    0.72 KiB
.svelte-kit/output/server/entries/pages/index.svelte.js        0.47 KiB
.svelte-kit/output/server/chunks/index-5f038599.js             2.31 KiB
.svelte-kit/output/server/chunks/hooks-1c45ba0b.js             0.00 KiB

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-auto
  Could not detect a supported production environment. See https://kit.svelte.dev/docs/adapters to learn how to configure your app to run on the platform of your choosing
  ✔ done

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-7300U CPU @ 2.60GHz
    Memory: 5.13 GB / 15.84 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.47)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.43
    @sveltejs/kit: next => 1.0.0-next.334
    svelte: ^3.44.0 => 3.48.0

Severity

annoyance

Additional Information

I am new to SvelteKit, so if there is a better way of defining global constant replacements, please let me know. Thank you
!

[Rich-Harris]

This is the Svelte compiler itself being a little overzealous about unrecognised variable names. Unfortunately there isn't a way to intercept warnings (which in this case are distracting but harmless), so we have to work around it:

// src/lib/constants.js
export const build = __VERSION__.build;
export const version = __VERSION__.version;

<!-- src/routes/index.svelte -->
+<script>
+  import { version, build } from '$lib/constants.js';
+</script>
+
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
-<p>Version: {__VERSION__.version}</p>
-<p>Build: {__VERSION__.build}</p>
+<p>Version: {version}</p>
+<p>Build: {build}</p>

Ideally we'd just use environment variables for this sort of thing, but consistent env var handling is a work-in-progress: #4296

[Conduitry]

Unfortunately there isn't a way to intercept warnings

@Rich-Harris I haven't tried it, but I think you should be able to use https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#onwarn

[JeremieBourque1]

Hi, thanks for the help! Sorry I didn't answer sooner, but I finally got around to getting back to this problem. I tried what you did, which gets rid of the warning from Svelte, but now I get an error from TypeScript saying it cannot find the variable. I can suppress the error with @ts-ignore but now it's starting to seem like this may not be the best way to accomplish what I am trying to do. Would env variables be more appropriate in this case?