import package version into page using Sveltekit

11/14/2022, 9:36:12 AM

by Leo Voon

First method

Make sure the package.json path is correct. If you don’t like Typescript warns you, use the second method.

// App.svelte

<script>
import {version} from './package.json'
</script>

<footer> {version} </footer>

Second method

If you do this. You will get error that $env/static/private is not allowed to be imported into client-side code.

// App.svelte

<script>
import { npm_package_version } from '$env/static/private'
</script>

<footer> { npm_package_version } </footer>

Well, you can load it in +layout.server.js / +page.server.js and pass to the client as PageServerData or LayoutServerData

// +page.server.ts

import { npm_package_version } from '$env/static/private';

export const load: PageServerLoad = async () => {
	return {
		npm_package_version
	};
};

// App.svelte

<script>
export let data: PageServerData;
</script>

<footer> {data.npm_package_version} </footer>

Third method

Also there is a Vite way to get this working.

Make a .env file. Create an environment variable with VITE_ prefix. Put the value of it to $npm_package_version.

// .env

VITE_MY_VERSION=$npm_package_version

Now you can access directly into the page as follows

// App.svelte

<footer> {import.meta.env.VITE_MY_VERSION} </footer>

Weeeee. ✨