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.
4,930
questions
117
votes
11
answers
107k
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,341
109
votes
12
answers
157k
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,333
81
votes
5
answers
28k
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 ...
- 3,787
79
votes
2
answers
25k
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 ...
- 6,517
78
votes
6
answers
78k
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=...
- 8,818
73
votes
6
answers
78k
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'
...
- 2,408
69
votes
12
answers
63k
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,446
64
votes
11
answers
98k
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, ...
- 907
60
votes
19
answers
147k
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 ...
- 665
58
votes
8
answers
25k
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 ...
- 5,230
57
votes
13
answers
71k
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,238
56
votes
9
answers
45k
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 ...
- 4,830
49
votes
5
answers
104k
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....
- 535
49
votes
6
answers
62k
views
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 ...
- 591
48
votes
4
answers
34k
views
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 ...
- 3,840
44
votes
10
answers
43k
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,185
43
votes
4
answers
77k
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,296
43
votes
1
answer
20k
views
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 ...
- 619
42
votes
5
answers
30k
views
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 ...
- 745
41
votes
5
answers
53k
views
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" ...
- 521
35
votes
10
answers
23k
views
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?
- 2,667
31
votes
12
answers
33k
views
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 ...
- 378
31
votes
5
answers
53k
views
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 ...
- 1,583
29
votes
7
answers
67k
views
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&...
- 1,115
29
votes
3
answers
26k
views
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 ...
- 673
29
votes
4
answers
20k
views
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 ...
- 536
29
votes
2
answers
33k
views
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 ...
- 5,146
27
votes
4
answers
50k
views
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 ...
- 861
27
votes
3
answers
26k
views
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 ...
- 273
27
votes
2
answers
12k
views
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.
- 417
27
votes
7
answers
41k
views
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 ...
- 2,879
26
votes
3
answers
17k
views
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 ...
- 2,673
26
votes
3
answers
16k
views
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 %>...
- 1,203
25
votes
3
answers
40k
views
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 ...
- 789
25
votes
4
answers
32k
views
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.
- 3,411
23
votes
2
answers
31k
views
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/...
- 387
23
votes
2
answers
30k
views
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 ...
- 468
23
votes
5
answers
31k
views
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()...
- 231
22
votes
3
answers
30k
views
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 ...
- 1,962
22
votes
11
answers
28k
views
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:
{
...
- 617
22
votes
10
answers
44k
views
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 ...
- 3,083
21
votes
7
answers
22k
views
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({...
- 661
21
votes
4
answers
16k
views
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 ...
21
votes
2
answers
29k
views
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 ...
- 663
21
votes
1
answer
5k
views
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 ...
- 335
20
votes
4
answers
21k
views
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
...
- 20.4k
19
votes
3
answers
14k
views
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 ...
19
votes
3
answers
2k
views
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: ...
- 502
18
votes
19
answers
45k
views
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
- 627
18
votes
17
answers
65k
views
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: /...
- 379