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
14
votes
4 answers
Scss not loaded with Vite
The build with Vite and Vue works like a charm (so ist the path correct). However, it does not with storybook.
Here my config:
vite.config.js
import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
//…
Lyokolux
- 1,227
- 2
- 10
- 34
14
votes
1 answer
How to avoid vite build deleting inside of "dist" directory?
I want to create multiple libraries by vite, so I try "rollupOptions" first. Like,
import { defineConfig } from 'vite'
export default defineConfig({
build: {
rollupOptions: {
input: {
"qy-viewer": 'src/qy-viewer.ts',
…
kochizufan
- 2,120
- 2
- 30
- 50
14
votes
1 answer
Library mode in vitejs: How should I manage external dependencies?
Let's say I'm building a library with a few dependencies: react, moment, lodash, and uuid, and I want to distribute this in both ES and UMD format.
I'm also wary of the final bundle size of the user's application.
React should go into…
Jimmy C
- 9,270
- 11
- 44
- 64
14
votes
2 answers
How to watch public directory in Vite project for hot-reload?
I have a react project configured with Vite.
Hot reload works great, but I use react-i18next for multiple language support and this is my structure:
public
-> en
-> translation.json
-> ru
-> translation.json
When I change the…
Two Horses
- 1,401
- 3
- 14
- 35
14
votes
2 answers
Separating Material UI in Vite (Rollup) as a manual chunk to reduce chunk size
Is anyone using Vite to bundle their MUI app? I was surprised at how big my vendor chunk (1.1MB) was from Vite/Rollup. I've come up with the below config which separates MUI packages into it's own chunk:
import { defineConfig } from "vite";
import…
Ben Stickley
- 1,551
- 1
- 16
- 22
14
votes
7 answers
Vite: resolve.alias - how to resolve paths?
What can resolve.alias do? It doesn't resolve the path below:
// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, '/src'),
},
…
Run
- 54,938
- 169
- 450
- 748
14
votes
7 answers
Vue 3 on Vite.js with Eslint — Unable to resolve path to module eslint(import/no-unresolved)
I use Vue 3 on Vite.js with Eslint + Airbnb config. Airbnb config has a rule eslint(import/no-unresolved), which is good, but Eslint doesn't know how to resolve alias path.
I want to use aliases for paths — example:
import TableComponent from…
Delicious Bacon
- 435
- 1
- 4
- 12
14
votes
2 answers
How to use asset URLs in style binding with Vite
I want to show a background image from my assets folder. When I use an image tag, the image is shown properly, so the image is well placed, but throws a 404 when I use the background-image style. Any idea about what is happening?. I am using Vue 3…
Francisco Martin
- 567
- 2
- 8
- 13
13
votes
0 answers
Cache transformed node modules with vite/esbuild
vite build uses esbuild to transform both the package dependencies (node modules) as well as the app source code into the target JavaScript specification, i.e. es2015.
I observe that vite/esbuild re-transform the entire sources in ./node_modules…
Lars Blumberg
- 19,326
- 11
- 90
- 127
13
votes
2 answers
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 await is not available in the configured target…
yakov
- 331
- 5
- 12
13
votes
3 answers
Test suite failed to run import.meta.env.VITE_*
After adding the environment variable import.meta.env.VITE_* in my code, the tests with vue-test-utils started to fail, with the error:
Jest suite failed to run
error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option…
sfn
- 263
- 1
- 2
- 13
13
votes
2 answers
How to run SASS with React on Vite?
I created a React project with Vite and want to use SASS as well. I have it installed already but I usually open a git bash and run sass -w sass:css.
Is there a better way to do it? I couldn't understand a solution in the docs, nor an answer…
8koi
- 182
- 1
- 1
- 10
13
votes
2 answers
How to set multiple output when build lib with vite
When I try to build a lib in vue3, I want to set multiple output file. Code like this:
rollupOptions {
output: [
{
file: 'bundle.js',
format: 'cjs'
},
{
file: 'bundle.min.js',
format: 'iife',
name:…
wubian
- 131
- 1
- 1
- 3
13
votes
1 answer
How to build a multi pages application by vite2 and vue3？
I built a multi-page app with Vue CLI and Vue 2 by changing vue.config.js like below:
pages: {
index: {
entry: './src/pages/index/main.js',
template: 'public/index.html',
title: 'index page',
chunks: ['chunk-vendors',…
radiorz
- 1,459
- 4
- 18
- 36
12
votes
4 answers
Vite Default template giving error in VScode ( "moduleResolution": "bundler" )
The value of ModuleResolution is set to Bundler by default while making a react+typescript app with vite it appears underlined red in vs code should i concerned ? is this a major error , i tried to do this a bunch of times and everytime i got the…
Abhishek V
- 121
- 1
- 4