Accessing env variables from index.html
Problem
Describe the bug I try to insert html tag by environment variable condition and use `vite-plugin-html` for it. But Vite behaviour is weird Reproduction https://github.com/xSorc/test-vite-index-env 1. This code works only in build [code block] During server i have this error [code block] 2. This code works only in dev server [code block] But during build this doesn't work, because Vite replace `process.env` with this: [code block] 3. The only option that works in both server and build is this: [code block] I suppose that first or second variant should works System Info Output of `npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers`: [code block] Used package manager: --- Before submitting the issue, please make sure you do the following - [x] Read the Contributing Guidelines. - [x] Read the docs. - [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate. - [x] Provide a description in this issue that describes the bug. - [x] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead. - [x] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
Error Output
error: Cannot use 'import.meta' outside a module while compiling ejs
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix Environment Variable Access in Vite for index.html
The issue arises because Vite replaces `process.env` with static values during the build process, and `import.meta` cannot be used in non-module contexts like `index.html`. This leads to discrepancies between development and production environments when trying to access environment variables directly in HTML files.
Awaiting Verification
Be the first to verify this fix
- 1
Define Environment Variables in Vite Config
Modify the Vite configuration to expose the necessary environment variables to the client-side code. Use the `define` option in `vite.config.js` to create global constants.
javascriptexport default defineConfig({ define: { 'process.env.VARIABLE_NAME': JSON.stringify(process.env.VARIABLE_NAME) } }); - 2
Use Vite's Import Meta for HTML
Instead of directly accessing environment variables in `index.html`, use Vite's `import.meta.env` in your JavaScript files. This allows you to conditionally render HTML based on environment variables.
javascriptif (import.meta.env.VITE_VARIABLE_NAME === 'true') { // Insert your HTML tag logic here } - 3
Update HTML Template with Script Tag
Ensure that your `index.html` includes a script tag that loads the JavaScript file where you handle the conditional rendering based on the environment variable.
html<script type="module" src="/path/to/your/script.js"></script> - 4
Test in Development and Production
Run the Vite development server and build the project to ensure that the environment variables are correctly accessed in both environments. Check the console for any errors.
bashnpm run dev && npm run build - 5
Verify Environment Variable Injection
Inspect the built HTML file to confirm that the expected HTML tags are conditionally rendered based on the environment variable values.
htmlOpen the built index.html and check for the presence of the expected elements.
Validation
Confirm that the HTML elements are rendered correctly based on the environment variable values in both development and production builds. Check for any console errors related to environment variable access.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep