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
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
What is the Vite way to do that? (I know that BASE_URL is…

v-moe
- 1,203
- 1
- 8
- 25
24
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
- 387
- 1
- 3
- 8
24
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 example:
HelloWorld.vue
router
…

Eria
- 2,653
- 6
- 29
- 56
24
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 loading it like :
const firebaseConfig = {
apiKey:…

Forshank
- 749
- 1
- 6
- 15
24
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
- 3,391
- 1
- 21
- 36
22
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())
^^^^^
SyntaxError: Unexpected reserved word
at…

Nehal Ahmed Khan
- 221
- 1
- 2
- 4
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 what I miss.
tailwind.config.js
const defaultTheme…

Ariel Magbanua
- 3,083
- 7
- 37
- 48
22
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/school/app.js',
appStudent:…

Lirrr
- 377
- 1
- 2
- 6
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 but I'm struggling to achieve my goal.
The project…

Rafal Adam Krohne
- 437
- 1
- 3
- 15
21
votes
6 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({
/* define: {
"Buffer": {}
},*/
plugins:…

Николай Сычев
- 661
- 1
- 3
- 11
21
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 browser can't access the port. That is, when I'm on my…

Paulie
- 1,940
- 3
- 20
- 34
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 doesn't exist any kind of linting like ESLint or…

H Nazmul Hassan
- 631
- 2
- 8
- 17
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 tool?
The single HTML file output is a core…

Samuel Plumppu
- 325
- 2
- 13
21
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 are replace by their corresponding values, but…

vexingCoder
- 438
- 1
- 6
- 9
20
votes
8 answers
Failed to fetch dynamically imported module:
I have a few React components that are lazy imported in App.tsx. App.tsx is used in Index.tsx where it is rendered and appended to the body.
const IndexPage = lazy(() => import("../features//IndexPage"));
const TagsPage = lazy(
() =>…

mahan
- 12,366
- 5
- 48
- 83