It seems like the issue you're facing is related to the usage of environment variables in Vite. The problem is that the variables are being passed as literal strings instead of being replaced with their corresponding values.
To resolve this issue, you can try the following steps:
-
Make sure that you have properly defined the environment variables in your
.envfile. Double-check the variable names and their values. -
Ensure that you have installed the necessary dependencies for handling environment variables in Vite. You can use the
dotenvpackage to load the variables from the.envfile. Install it by running the following command:npm install dotenv --save-dev -
In your Vite configuration file (usually
vite.config.js), import and configure thedotenvpackage to load the environment variables. Here's an example:import { defineConfig } from 'vite'; import dotenv from 'dotenv'; export default defineConfig(() => { dotenv.config(); // Rest of your Vite configuration }); -
Restart your Vite development server to ensure that the changes take effect.
With these steps, Vite should be able to replace the environment variables with their corresponding values. You can then access them using import.meta.env.VITE_VARIABLE_NAME in your code.
If the issue persists, it might be worth checking if there are any recent updates or changes in the Vite or dotenv packages that could be causing this behavior. Additionally, you can consult the Vite documentation or seek help from the Vite community for further assistance.
I hope this helps! Let me know if you have any further questions.