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.
6,278
questions
142
votes
15
answers
250k
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,683
136
votes
14
answers
141k
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,636
115
votes
5
answers
45k
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 ...
- 4,247
111
votes
3
answers
40k
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 ...
- 7,271
109
votes
8
answers
131k
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,956
105
votes
8
answers
110k
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=...
- 9,650
101
votes
22
answers
267k
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 ...
- 1,075
96
votes
13
answers
46k
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,852
95
votes
13
answers
91k
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,816
79
votes
14
answers
144k
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, ...
- 1,078
70
votes
14
answers
92k
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,398
68
votes
7
answers
153k
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....
- 725
66
votes
9
answers
62k
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 ...
- 5,210
64
votes
17
answers
80k
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,427
62
votes
6
answers
119k
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,682
62
votes
12
answers
94k
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 ...
- 721
57
votes
18
answers
85k
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:
{
...
- 973
57
votes
6
answers
51k
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 ...
- 4,092
56
votes
1
answer
31k
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 ...
- 816
51
votes
11
answers
36k
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,853
51
votes
6
answers
46k
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 ...
- 848
47
votes
5
answers
71k
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" ...
- 581
47
votes
4
answers
26k
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.
- 617
46
votes
6
answers
70k
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,811
42
votes
5
answers
29k
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,942
39
votes
12
answers
50k
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 ...
- 458
38
votes
2
answers
50k
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,434
37
votes
3
answers
37k
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 ...
- 373
35
votes
7
answers
86k
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,197
34
votes
8
answers
59k
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 ...
- 3,009
33
votes
3
answers
22k
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,323
32
votes
7
answers
64k
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 ...
- 939
32
votes
4
answers
50k
views
How to Change vite application port
If you are change the vite application port please follow the procedure.
"scripts": {
"dev": "vite --port 3006",
"build": "vite build",
"...
- 329
32
votes
5
answers
45k
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 ...
- 558
32
votes
4
answers
31k
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 ...
- 586
31
votes
4
answers
22k
views
Get error to build my project in Vite - Top-level await is not available in the configured target environment
I try to build my project in vite,
my project - https://github.com/yakovcohen4/starbucks-openlayers
I run npm run dev and all work.
but when I run to build it I get an error.
error message:
Top-level ...
- 511
30
votes
3
answers
30k
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 ...
- 733
30
votes
2
answers
44k
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/...
- 477
29
votes
8
answers
31k
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({...
- 801
29
votes
19
answers
101k
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: /...
- 499
29
votes
4
answers
57k
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 ...
- 931
28
votes
5
answers
42k
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,661
28
votes
4
answers
30k
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.7k
27
votes
3
answers
42k
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 ...
- 2,192
26
votes
4
answers
23k
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 ...
25
votes
25
answers
30k
views
React Material UI createTheme_default is not a function
I have created a project using vite and react. I create a theme to set my project into right to left.
Everything was ok and the project was running properly.
const theme = createTheme({
direction: '...
- 694
25
votes
5
answers
42k
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()...
- 251
24
votes
23
answers
74k
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
- 697
24
votes
3
answers
36k
views
How to set vite (preview) production port?
I have been looking arround on how to set a production port for vite but I can't find way
I have tried this vite js config
server: {
host: true,
},
preview:{
port:5005
}
but it seems ...
24
votes
1
answer
6k
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 ...
- 365