How can I display the current app version from package.json to the user using Vite?

For React & TypeScript users:

Add a define to your vite.config.ts:

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react()],
  define: {
    APP_VERSION: JSON.stringify(process.env.npm_package_version),
  },
});

If you haven’t got one already, define a vite-env.d.ts or env.d.ts and add a declare:

declare const APP_VERSION: string;

You’ll now be able to use the variable APP_VERSION anywhere in your code & Vite will substitute it at compile time.

Note: You may need to restart your TS server for the declaration to be picked up by intellisense:

VSCode MacOS: ⌘ + ⇧ + P > Restart TS Server

VSCode Windows: ctrl + ⇧ + P > Restart TS Server