Accessing env variables from index.html in vitejs Vite

Explanation of the problem

The problem at hand is with the implementation of inserting an HTML tag using environment variables with vite-plugin-html. The code in question works only in the build, but not in the server. This can be seen with the following code snippet:

<% if (import.meta.env.VITE_SHOW_TAG === '1') { %>
  works
<% } %>

During server execution, the following error is thrown:

[vite] Internal server error: Cannot use 'import.meta' outside a module while compiling ejs

Another option tried was using process.env, but it only works in the dev server and not during the build. The code snippet for this is:

// vite.config.ts
require('dotenv').config();
// index.html
<% if (process.env.VITE_SHOW_TAG === '1') { %>
  works
<% } %>

This leads to the following code during build:

<% if (({}).VITE_SHOW_TAG === '1') { %>
  works
<% } %>

The only solution that worked in both the server and build environment was using process.env['VITE_SHOW_TAG'] as shown below:

// vite.config.ts
require('dotenv').config();
// index.html
<% if (process.env['VITE_SHOW_TAG'] === '1') { %>
  works
<% } %>

The issue might be related to the internal workings of Vite, and it is unclear why the first or second solution was not working. The environment used for this issue can be seen below:

  System:
    OS: Windows 10 10.0.19042
    CPU: (6) x64 Intel(R) Core(TM) i5-8600K CPU @ 3.60GHz
    Memory: 9.13 GB / 15.94 GB
  Binaries:
    Node: 14.15.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.9 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (90.0.818.42)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    vite: 2.2.1 => 2.2.1

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for Accessing env variables from index.html in vitejs Vite

The first solution to the issue of replacing environment variables in the index.html file when using the Vite build tool. The solution utilizes the htmlPlugin function and the transformIndexHtml hook, which are built-in to Vite. The code imports the defineConfig and loadEnv functions from the Vite library to aid in the process. Here’s the code for reference:

import { defineConfig, htmlPlugin, loadEnv } from 'vite';

export default defineConfig({
  plugins: [
    htmlPlugin({
      transformIndexHtml: (html, { env }) => {
        const replaceEnv = (str) =>
          str.replace(/\${(\w+)}/g, (_, n) => env[n]);

        return replaceEnv(html);
      },
    }),
    loadEnv(),
  ],
});

On the other side, it’s explained that there is a problem with using vite-plugin-html, as it has a tendency to consume quotes in the index.html file during the transformation process. To demonstrate this issue, the output of the index.html file with vite-plugin-html is shown, and it can be seen that many of the double quotes have been consumed. On the other hand, the output of the index.html file with Vite and the transformIndexHtml hook is shown, and it can be seen that all quotes remain intact. The author provides a code example for using the transformIndexHtml hook, which is similar to how it is done in Create React App (CRA). The code is as follows:

import { defineConfig, htmlPlugin, loadEnv } from 'vite';

export default defineConfig({
  plugins: [
    htmlPlugin({
      transformIndexHtml: (html, { env }) => {
        const replaceEnv = (str) =>
          str.replace(/\${(\w+)}/g, (_, n) => env[n]);

        return replaceEnv(html);
      },
    }),
    loadEnv(),
  ],
});

Other popular problems with Vite

import { defineConfig } from 'vite';
import optimizeDeps from '@vitejs/optimize-deps';

export default defineConfig({
  plugins: [
    optimizeDeps({
      include: [/\.js$/],
      exclude: ['vue'],
    }),
  ],
});

Problem: Limited Support for Non-ES Modules

Another issue with Vite is its limited support for non-ES modules, such as CommonJS or AMD modules. This can cause compatibility issues for projects that rely on non-ES modules, and make it difficult to integrate Vite into existing projects that use these modules.

Solution:

The solution to this problem is to use the rollup-plugin-commonjs plugin in conjunction with Vite, which allows you to convert CommonJS modules to ES modules that Vite can understand. You can install this plugin using npm or yarn, and then add it to your Vite configuration file. Here’s an example of how to use the rollup-plugin-commonjs plugin:

import { defineConfig } from 'vite';
import commonjs from 'rollup-plugin-commonjs';

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

Problem: Limitations with Hot Module Replacement (HMR)

Vite’s implementation of Hot Module Replacement (HMR) can have limitations and can cause compatibility issues with certain plugins and libraries. This can make it difficult to use HMR in complex projects, and can result in a less smooth development experience.

Solution:

One solution to this issue is to use the vite-plugin-vue plugin, which provides full support for HMR in Vue projects. This plugin allows you to seamlessly use HMR in your Vue projects and provides a more robust development experience. You can install this plugin using npm or yarn, and then add it to your Vite configuration file. Here’s an example of how to use the vite-plugin-vue plugin:

import { defineConfig } from 'vite';
import vue from 'vite-plugin-vue';

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

A brief introduction to Vite

Vite is a fast and efficient frontend build tool that was designed to improve the development experience for modern JavaScript applications. It uses an in-memory file system and modern browser APIs to provide fast build times, instant updates, and minimal bundle sizes. Vite uses native ES modules and is optimized for modern browsers, making it a good choice for building modern, high-performance web applications.

Vite also provides a flexible and configurable architecture that allows developers to easily extend its functionality. This makes it possible to use Vite with a variety of different libraries, frameworks, and tools, including Vue, React, Angular, and others. Vite’s modular architecture also makes it easy to integrate with other build tools and plugins, such as Rollup, Babel, or TypeScript, to further extend its capabilities. Vite’s focus on developer experience, performance, and flexibility make it an excellent choice for building modern, high-quality web applications.

Most popular use cases for Vite

1. Building High-Performance Single-Page Applications (SPAs): Vite’s fast build times, instant updates, and minimal bundle sizes make it an ideal tool for building high-performance SPAs. With its support for native ES modules, Vite can help you create fast and efficient applications that load quickly and deliver a smooth user experience.
2. Integrating with Modern JavaScript Libraries and Frameworks: Vite’s modular architecture and flexibility make it easy to integrate with popular libraries and frameworks like Vue, React, and Angular. This allows you to build applications that use the best tools and libraries for your specific use case. For example, you can use Vite with Vue by creating a vue.config.js file and adding the following code:

const viteConfig = {
  // Vite configuration options
}

module.exports = viteConfig;

3. Building Modern Web Applications: With its focus on developer experience, performance, and flexibility, Vite is a powerful tool for building modern web applications. Whether you are building a SPA, a Progressive Web App (PWA), or a traditional multi-page application, Vite provides the tools and features you need to create high-quality, user-friendly applications that deliver an exceptional user experience.