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.

Filter by
Sorted by
Tagged with
117 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 '...
Oleksii Zelenko's user avatar
109 votes
12 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....
Mohamed Fadl's user avatar
  • 1,333
81 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 ...
user3848207's user avatar
  • 3,787
79 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 ...
rodrigocfd's user avatar
  • 6,517
78 votes
6 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=...
Matt's user avatar
  • 8,818
73 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' ...
hyphen's user avatar
  • 2,408
69 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 ...
Alex Monkey's user avatar
  • 1,446
64 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, ...
Fernando H'.''s user avatar
60 votes
19 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 ...
MaN8fy's user avatar
  • 665
58 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 ...
WillD's user avatar
  • 5,230
57 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. <img src="/src/assets/images/my-image.png" alt=...
Ondrej Vencovsky's user avatar
56 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 ...
hangc's user avatar
  • 4,830
49 votes
5 answers

Changing the input and output directory in Vite

I am using Vite ( for a static multipage site. This is the default project folder structure after the build command. my-app/ ├─ node_modules/ ├─ dist/ │ ├─ assets/ │ ├─ index....
Shams Sujon's user avatar
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? > [email protected] build > vite build vite v2.3.4 building for production... ✓ 1 ...
James Mansfield's user avatar
48 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 ...
Sean D's user avatar
  • 3,840
44 votes
10 answers

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 ...
Kakiz's user avatar
  • 1,185
43 votes
4 answers

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 ...
Roman Koliada's user avatar
43 votes
1 answer

vite build always using static paths

I have a simple setup with an index.html, some js file and a sass file, building it with vite. I am using vite defaults without a config file. After running a build the index.html in the dist folder ...
norman's user avatar
  • 619
42 votes
5 answers

Is there a way to debug code in VsCode initiated with Vite?

My dev team configured a Node.js project with TypeScript to use Vite as dev server, using the npm script panel of VsCode. Is there a way to attach the debugger into this Vite server so we can debug ...
JLuis Estrada's user avatar
41 votes
5 answers

pnpm peer dependencies auto-install

How (or on which file) to set true to do auto install dependencies ? my terminal error: hint: If you want peer dependencies to be automatically installed, set the "auto-install-peers" ...
fedoraname1's user avatar
35 votes
10 answers

How can I display the current app version from package.json to the user using Vite?

With create-react-app one could use process.env.REACT_APP_VERSION for this. Is there an equivalent in Vite?
Obiwahn's user avatar
  • 2,667
31 votes
12 answers

Vite 'global is not defined'

I'm creating a project using Vite with vanilla-ts, at one point I had to use the readdir method from the fs-extra package, but it created an error saying process is not defined, some suggested I place ...
8BitSoda's user avatar
  • 378
31 votes
5 answers

Vite / Vue 3 : "require is not defined" when using image source as props

I switched from the Vue CLI to Vite CLI, and from the Composition API of Vue 3 to SFC Script setup API. How it previously worked for me When I was using the official Vue CLI, I could import an image ...
Dony's user avatar
  • 1,583
29 votes
7 answers

how to use sass using in vuejs3/vite

I starting with vite / vuejs 3 after installing sass with npm install -D sass I tried to add my _variables.js file this to vite.config.js css: {preprocessorOptions: {scss: {additionalData: `@import&...
bluelemonade's user avatar
  • 1,115
29 votes
3 answers

How to add typescript to Vue 3 and Vite project

My setup: I installed Vue and Vite via the create-vite-app module, and then updated all the packages that was generated by 'init vite-app' to the very latest RC versions for Vue and Vite. Now I want ...
Solsiden's user avatar
  • 673
29 votes
4 answers

How do I add types to a Vite library build?

I followed the vite documentation for using library mode and I am able to produce a working component library. I created the project with the vue-ts preset and in my component I have defined props ...
Neelansh Mathur's user avatar
29 votes
2 answers

Using Vite for backend

We are using Vite for our frontend (inside SvelteKit) and it works nicely with creating SSR and frontend code. I especially like the prebundling of 3rd party packages via esbuild. Can someone tell me ...
user3612643's user avatar
  • 5,146
27 votes
4 answers

Internal server error: Preprocessor dependency "sass" not found. Did you install it?

I created a new VUE 3 and typescript application using vite. I later installed primevue and primeflex. When I run npm run dev, I get the error seen below: How do I fix this? My repo, if that will ...
OLA's user avatar
  • 861
27 votes
3 answers

vue component doesn't update after state changes in pinia store

I'm currently working on my first vue application, currently building the login logics. For State management, pinia is being used. I created a Pinia Store to manage the "isLoggedIn" state ...
bjørn's user avatar
  • 273
27 votes
2 answers

Is there any bundle analyzer for vite?

We developed an app in vite and I want to analyze the bundle of app, I found rollup-plugin-analyzer but it did not work for me.
Pouryak's user avatar
  • 417
27 votes
7 answers

Bundle JS and CSS into single file with Vite

I'm having a devil of a time figuring out how to build a single .js file from Vite in my Svelte project that includes all of the built javascript and CSS from my Svelte projects. By default, Vite ...
ringmaster's user avatar
  • 2,879
26 votes
3 answers

Vitest - @ src folder alias not resolved in test files

I have a vue3 project using Vite/Vitest, as recommanded in Vue.js documentation. Here is the structure of the project: src components // my Vue components here, potentially in sub-folders. For ...
Eria's user avatar
  • 2,673
26 votes
3 answers

String replacements in index.html in vite

I am trying to inject some strings into the index.html of a Vite app (using vue3 template). In a vue-cli project for example we would have <link rel="icon" href="<%= BASE_URL %>...
v-moe's user avatar
  • 1,203
25 votes
3 answers

loading env variables in react app using vite

I´ve been through all the docs from vite, react.js and dev blogs, but I'm not getting it to work I have a .env file which contains the following VITE_API_KEY = XXX inside my firebase.js file I'm ...
Forshank's user avatar
  • 789
25 votes
4 answers

Enable sourcemaps in Vue-Vite

Is it possible to enable sourcemaps in Vue-Vite in production environment? I would like to use it for Bugsnag. Can't find anything about it in the docs. In dev it just works out of the box.
ndberg's user avatar
  • 3,411
23 votes
2 answers

Multiple entry points in Vite

I have a Vue2 project with Webpack, and I'm trying to switch from Webpack to Vite. In webpack.common.js, I have multiple entry points: module.exports = { entry: { appSchool: './resources/...
Lirrr's user avatar
  • 387
23 votes
2 answers

Import.meta.env undefined on production build vitejs

I am using vitejs to compile my react app statically, however after build .env imports become undefined which is not the case on development stage. reading the docs I've found out that these variables ...
vexingCoder's user avatar
23 votes
5 answers

npm run dev not working with vite laravel 9

users-iMac-2:backend NEHAL$ npm run dev > dev > vite file:///Users/user/Desktop/backend/node_modules/vite/bin/vite.js:7 await import('source-map-support').then((r) => r.default.install()...
Nehal Ahmed Khan's user avatar
22 votes
3 answers

running a vite dev server inside a docker container

I have a Vue-cli app that I'm trying to convert to vite. I am using Docker to run the server. I looked at a couple tutorials and got vite to run in development mode without errors. However, the ...
Paulie's user avatar
  • 1,962
22 votes
11 answers

504 (Outdated Optimize Dep) while using react-vite

I installed a package called big decimal js while using React with JavaScript on Vite. On compiling, it showed the following error on the console, and the application did not load: My package.json: { ...
Vedant Shah's user avatar
22 votes
10 answers

Why Laravel Vite Directive Not Working in My Project?

I installed and configured laravel breeze and blade according to the documentation given by laravel. By default it uses Vite but somehow @vite directive is not working in my project and I don't know ...
Ariel Magbanua's user avatar
21 votes
7 answers

Buffer is not defined in React-vite

Buffer is not defined after migrating from CRA(create react app) "vite": "^2.7.12" I try to add plugins, add define for Buffer, but it's not work. const viteConfig = defineConfig({...
Николай Сычев's user avatar
21 votes
4 answers

Vue 3 + Vite + Typescript - dev & build not picking up TS Errors

I'm using Vue 3, Vite and TypeScript. I wanted to give a try of building Vue project with TypeScript. The configuration has been really difficult so far. I've been looking at various documentations ...
Rafal Adam Krohne's user avatar
21 votes
2 answers

How can I intregate ESLint in a Vite+React project?

When I create a React application using Create React App, ESLint is included by default. That's why we don't want to integrate ESLint manually. But when I create a React application using Vite there ...
H Nazmul Hassan's user avatar
21 votes
1 answer

SvelteKit: How to output build as single HTML file with inlined JS and CSS?

Is it possible to build a SvelteKit project to a single output HTML file which inlines all JS and CSS? Could SvelteKit be configured to support this output format or do I need to use an external build ...
Samuel Plumppu's user avatar
20 votes
4 answers

vite without hash in filename

I'm trying to compile a webcomponent based on the monaco editor (in a lit element context). Having tried a lot of options I now have got the result down to two files rmx-monaco.abc123.js style.css ...
Simon H's user avatar
  • 20.4k
19 votes
3 answers

How do I make Vite build my files every time a change is made?

I'm trying to make Vite build my files and output them into the dist folder every time I save/make changes on to my files during development. How would I do that? Here is my vite.config.development.js ...
i am bad at coding's user avatar
19 votes
3 answers

vite: how to handle "require" statement in third-party module?

I use an UI library which has "require" statement. I can use vite to run development mode successfully. but when I build and preview the dist, the browser fail: Uncaught ReferenceError: ...
philo's user avatar
  • 502
18 votes
19 answers

Vite Server is running but not working on localhost

Vite + Reactjs server is running but I am getting "This localhost page can’t be found No webpage was found for the web address: https://localhost:4200/" on the browser
Muhammad Raheel's user avatar
18 votes
17 answers

Vite manifest not found

I Working on project that working with laravel 9 and Vite with laravel-vite, In Dev environment all thing working fine, but in production cPanel server I has this issue Vite manifest not found at: /...
sos5020's user avatar
  • 379

2 3 4 5