How to display a package.json version in the footer of the site?

Question

I would like to display a version that is declared in the package.json file in the footer of my site

How can I do this?

I found this FAQ explanation in their documentation, but unfortunately I don't know to access it from my component

// svelte.config.js

import { readFileSync } from 'fs';
import { fileURLToPath } from 'url';
 
const file = fileURLToPath(new URL('package.json', import.meta.url));
const json = readFileSync(file, 'utf8');
const pkg = JSON.parse(json);

Spiritless

Answer 1

You can use vite.define to do this:

const config = {
  kit: {
    vite: {
      define: {
        VERSION: pkg
      }
    }
  }
};

and in your component:

<script>
  const version = VERSION;
</script>

<span>{version}</span>

edit on 06.07.2023

Seems the setup has changed in the time since the answer. Now you can do this in vite.config.js as below:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { readFileSync } from 'fs';
import { fileURLToPath } from 'url';

const file = fileURLToPath(new URL('package.json', import.meta.url));
const json = readFileSync(file, 'utf8');
const pkg = JSON.parse(json);

export default defineConfig({
    plugins: [sveltekit()],
    define: {
        PKG: pkg
    }
});

and use

<p>{PKG.version}</p>

Hollie

how do you import VERSION and avoid VERSION is not defined error messages? (using SvelteKit) – Budgerigar

Just a nit, but I think it should be VERSION: JSON.stringify(pkg.version), thanks. – Pergrim

@NickJonas With Typescript, you can add declare const VERSION: string to your src/app.d.ts to fix errors and warnings. Vite Docs: Define. – Pergrim

Answer is outdated: "Unexpected option config.kit.vite" – Kirk

@NatoBoram Updated for the latest version – Hollie

Note that the keys of define are replaced in the code directly with their value. If you assign it a string value (instead of a JSON object as in the answer), then you'll have to add quotes in your code as well, e.g. define: { SOME_VALUE: "test" } could be used in your code as const value = "SOME_VALUE" (but not as const value = SOME_VALUE - unless test is a valid variable in the local scope). – Piefer

Answer 2

A little late to the party, but here's how I was able to achieve an answer to OP's question as of (14 Apr 23).

As per the sveltekit docs.

// add the following to > svelte.config.js
import { readFileSync } from 'fs';
import { fileURLToPath } from 'url';

const file = fileURLToPath(new URL('package.json', import.meta.url));
const json = readFileSync(file, 'utf8');
const pkg = JSON.parse(json);

As well as;

// add the following to kit: {}
version: {
  name: pkg.version
}

Then in your desired component;

<script>
  import { version } from '$app/environment';
</script>

<span>The package.json version is: {version}</span>

If you're planning to go the Vite route, you should read, urb_'s answer to a similar question asked here on S.O. How do I add a version number to a SvelteKit/Vite app?.

but in summary;

Be aware, config changed after @sveltejs/[email protected]: After a breaking change on @sveltejs/[email protected], Vite config must be included in its own file:

Heelandtoe

Be careful with replacing kit.version.name as it is used by SvelteKit for HMR/change detection during development. Also, the full warning linked seems to suggest to prefer using vite.config.js over svelte.config.js. – Piefer