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.
Questions tagged [vite]
4741 questions
114
votes
11 answers
`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 '@/components/Component.vue'
this is my…
Oleksii Zelenko
- 2,311
- 3
- 7
- 21
106
votes
11 answers
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.meta.env -> import.meta.env.TEST_VAR it returns…
Mohamed Fadl
- 1,303
- 2
- 8
- 10
79
votes
5 answers
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 build",
"preview": "vite preview"
},
What's the difference between vite and vite preview? When…
user3848207
- 3,737
- 17
- 59
- 104
76
votes
2 answers
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 contents of each one:
tsconfig.json
{
…
rodrigocfd
- 6,450
- 6
- 34
- 68
75
votes
5 answers
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=Wheatgrass
VITE_PORT=8080
How can I use VITE_PORT in…
Matt
- 8,758
- 4
- 35
- 64
71
votes
6 answers
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'
import vue from '@vitejs/plugin-vue'
import fs from…
hyphen
- 2,368
- 5
- 28
- 59
67
votes
12 answers
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 framework: » react
√ Select a variant: » react-ts
Then…
Alex Monkey
- 1,427
- 1
- 14
- 16
63
votes
11 answers
"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, although I don't have enough data to confirm. It…
Fernando H'.'
- 897
- 1
- 8
- 19
56
votes
23 answers
"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 or external command, operable program or batch…
MaN8fy
- 625
- 1
- 5
- 6
55
votes
9 answers
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 NodeJS {
interface ProcessEnv {
…
hangc
- 4,730
- 10
- 33
- 66
54
votes
8 answers
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 default defineConfig({
test: {
globals:…
WillD
- 5,170
- 6
- 27
- 56
54
votes
13 answers
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.
It works well in both cases: when…
It works well in both cases: when…
Ondrej Vencovsky
- 3,188
- 9
- 28
- 34
49
votes
6 answers
Vite "rollup failed to resolve" build error
Trying to build a simple Vite project that has tailwindcss in it and getting the following error, any ideas?
> vite-project@0.0.0 build
> vite build
vite v2.3.4 building for production...
✓ 1 modules transformed.
[vite]: Rollup failed to resolve…
James Mansfield
- 591
- 1
- 4
- 5
47
votes
4 answers
TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'esnext', or 'system'
When Jest.js encounters import.meta in the code, I get an error:
FAIL testFile.test.ts
● Test suite failed to run
testFile.ts:40:10 - error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020',…
Sean D
- 3,810
- 11
- 45
- 90
47
votes
5 answers
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.html
├─ index.html
├─ main.js
├─ style.scss
├─…
Shams Sujon
- 515
- 1
- 4
- 9