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

Question

With create-react-app one could use process.env.REACT_APP_VERSION for this.

Is there an equivalent in Vite?

Answer 1

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

Answer 2

EDIT: For TypeScript, see Jamie's answer to set the types.

If you want to use plugin, see Adarsh's answer

But it's very easy to implement it yourself. You can use define in vite.config.js. Read about it here

vite.config.js

export default {
    plugins: [vue()],
    define: {
        '__APP_VERSION__': JSON.stringify(process.env.npm_package_version),
    }
}

component.vue

<template>
    <div>{{ version }}</div>
</template>
<script>
export default {
    data () {
        version: __APP_VERSION__
    },
}
</script>

or with <script setup>

<script setup>
const version = __APP_VERSION__
</script>
<template>
    <div>{{ version }}</div>
</template>

You should be able to change '__APP_VERSION__' as long as it doesn't conflict with javascript syntax or other variables.

Answer 3

Vite 4, React, Typescript setup

This worked for me.

I imported package.json in vite.config.ts and defined a PACKAGE_VERSION environment variable.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import packageJson from './package.json';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define:  {
    'import.meta.env.PACKAGE_VERSION': JSON.stringify(packageJson.version)
  }
})

I added "resolveJsonModule": true to the compiler options of tsconfig.node.json.
I added "./package.json" to the include array of tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true
  },
  "include": ["vite.config.ts", "./package.json"]
}

In order to make intellisense work for PACKAGE_VERSION, I added it to vite-env.d.ts

interface ImportMetaEnv {
    readonly PACKAGE_VERSION: string;
    // more env variables...
}
  
interface ImportMeta {
    readonly env: ImportMetaEnv
}

I could use {import.meta.env.PACKAGE_VERSION} anywhere in my react app to show the package version.

Answer 4

Simplest solution

// .env
VITE_REACT_APP_VERSION=$npm_package_version

// App.jsx
...
console.log('ver. ', import.meta.env.VITE_REACT_APP_VERSION)
...

Answer 5

If you don't want to use define, there is a vite plugin for just this.

https://www.npmjs.com/package/vite-plugin-package-version

// vite.config.js
import loadVersion from 'vite-plugin-package-version';

export default {
  plugins: [loadVersion()],
};

Will inject import.meta.env.PACKAGE_VERSION with the version specified in your package.json.

Answer 6

This worked for me:

import { version } from '../../package.json'

Answer 7

In case anyone is interested, this automatically increases the version in package.json and makes it available to the application.

import { defineConfig } from 'vite';
const increasePackageVersion = () => {
    try {
        const fs = require('fs');
        const path = require('path');
        const packageFilePath = path.join(__dirname, 'package.json');
        const packageJson = JSON.parse(fs.readFileSync(packageFilePath, 'utf8'));
        packageJson.version = packageJson.version.replace(/(\d+)$/, (match, p1) => {
            return parseInt(p1) + 1;
        }
        );
        fs.writeFileSync(packageFilePath, JSON.stringify(packageJson, null, 2));
        console.log('New version is', packageJson.version);
    } catch (error) {
        console.log('Error in increasePackageVersion', error);
    }

};

export default defineConfig({
    build: {
        lib: {
            entry: 'src/main.js',
            formats: ['es']
        }
    },
    plugins: [
    increasePackageVersion()],
    define: {
        '__APP_VERSION__': JSON.stringify(process.env.npm_package_version),
    }
});

console.log(__APP_VERSION__);

Answer 8

Below Answer includes

1. Secure Way of Importing Vue version.

2. Incrementing semantic versions using npm commands

Secure and Semantic Way of Versioning using npm and env

Answer 9

React, Vite, Typescript

I have used this with React, typescript and vite.

Here is what worked for me and why:

first step: add version

Added the version to: vite.config.ts

export default defineConfig({
  define: {
    `config.version`: JSON.stringify('my-custom-name')
  }
})

declared the config file on .d.ts

This will prevent the typescript from creating an issue for not declaring global config.

On this file: src/vite-env.d.ts Added the next line

declare var config: any;

used the variable.

I used the variable inside the react function as any normal variable:

const { version } = config;

I used this on the open sauced project at this PR: https://github.com/open-sauced/ai/pull/141/files in case if you want to check the relevant code.

It would be helpful to reference the next questions as well:

Angular error TS2304: Cannot find name 'config'

Create a global variable in TypeScript

Answer 10

Specifying VITE_VERSION=${npm_package_version} in .env works for me. The version is available under import.meta.env.VITE_VERSION. Tested on vite version 4.4.5.