Questions tagged [vite]
For questions about using Vite, a two-part build tool (dev server + build command) that aims to provide a faster and leaner development experience for modern web projects.
6,662
questions
157
votes
16
answers
286k
views
How to load environment variables from .env file using Vite
I want to load environment variables from the .env file using Vite
I used the import.meta.env object as mentioned in Docs
.env file:
TEST_VAR=123F
when trying to access this variable via the import....
- 1,843
142
votes
14
answers
153k
views
`Vue3 - Vite` project alias src to @ not working
I have installed the project with vue3 - vite importing a component like
import Component from '../../../../components/Component.vue'
i just want to alias the src folder and do
import Component from '...
- 2,696
124
votes
5
answers
53k
views
What is the difference between "vite" and "vite preview"?
I created a project template using vite.
Under package.json, I saw this;
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite ...
- 4,437
118
votes
8
answers
154k
views
Vite https on localhost
I'm trying to get https working on my localhost environment for Vite. Chrome shows an invalid certificate error.
I've set up my vite.config.js file like this:
import { defineConfig } from 'vite'
...
- 3,108
118
votes
8
answers
124k
views
How can I use Vite env variables in vite.config.js?
With the following .env in my Vite project:
# To prevent accidentally leaking env variables to the client, only
# variables prefixed with VITE_ are exposed to your Vite-processed code
VITE_NAME=...
- 9,948
117
votes
3
answers
47k
views
Why does Vite create two TypeScript config files: tsconfig.json and tsconfig.node.json?
I'm using Vite to create a new React + TypeScript project.
After creating the project, there are two TypeScript config files on the root folder: tsconfig.json and tsconfig.node.json. These are the ...
- 7,471
114
votes
25
answers
326k
views
"vite is not recognized ..." on "npm run dev"
I'm using Node.js and npm for the first time, I'm trying to get Vite working, following the tutorials and documentation. But every time I run into the problem:
'vite' is not recognized as an internal ...
- 1,205
107
votes
14
answers
54k
views
Vitest defineConfig, 'test' does not exist in type 'UserConfigExport'
Trying to setup vitest on an already existing vite (vue 3, typescript) project.
My vite.config.ts looks like this:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export ...
- 6,072
101
votes
13
answers
100k
views
Absolute path not working in Vite project React TS
I'm struggling to get absolute path to work in a Vite react-ts project.
Here's how I created the project
npm init @vitejs/app
npx: installed 6 in 1.883s
√ Project name: ... test-vite
√ Select a ...
- 1,926
89
votes
16
answers
165k
views
"TypeError: Failed to fetch dynamically imported module" on Vue/Vite vanilla setup
We have a vanilla Vue/Vite setup and I'm receiving TypeError: Failed to fetch dynamically imported module on sentry logs.
It seems like the errors are correlated in time with new deployment to prod, ...
- 1,178
73
votes
6
answers
136k
views
How to configure proxy in Vite?
I was trying to follow the docs and created vite.config.js like this:
const config = {
outDir: '../wwwroot/',
proxy: {
// string shorthand
'/foo': 'http://localhost:4567',
// with ...
- 4,872
73
votes
18
answers
99k
views
Vue 3 Vite - dynamic image src
I'm using Vue 3 with Vite. And I have a problem with dynamic img src after Vite build for production. For static img src there's no problem.
<img src="/src/assets/images/my-image.png" alt=...
- 3,448
71
votes
8
answers
172k
views
Changing the input and output directory in Vite
I am using Vite (https://vitejs.dev/) for a static multipage site.
This is the default project folder structure after the build command.
my-app/
├─ node_modules/
├─ dist/
│ ├─ assets/
│ ├─ index....
- 755
70
votes
19
answers
91k
views
Unable to import SVG with Vite as ReactComponent
Tried to use this library: vite-plugin-react-svg
and had no success by importing it like:
import { ExternalLink } from 'assets/svg/link-external.svg?component';
Are there any workarounds for this ...
- 1,496
69
votes
9
answers
68k
views
Typescript Types for import.meta.env
I am now using a framework (vite) that injects environment variables into import.meta.env.
I was previously able to create a file env.d.ts to provide types to process.env
declare global {
namespace ...
- 5,298