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.

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:…
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