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
16
votes
4 answers
Vite - change ouput directory of assets
By default Vite generates files in the source directory under dist.
my-app/
├─ node_modules/
├─ dist/
│ ├─ assets/
| | | index.js
| | | index.css
│ ├─ index.html
├─ index.html
├─ main.js
├─ style.scss
├─ package.json
I need to…
mahan
- 12,366
- 5
- 48
- 83
16
votes
1 answer
Vite - Static Files Are Not Copying
I have a Vue.js app that relies on Vite. In this app, I have two static files that I need to copy to my dist directory: favicon.ico and manifest.json. My vite.config.js file looks like this:
import { defineConfig } from 'vite'
import vue from…
Dev
- 921
- 4
- 14
- 31
16
votes
1 answer
How to setup PhpStorm / WebStorm to work with Vite aliases?
Vite isn't supported by the PhpStorm / WebStorm yet, so given following Vite configuration:
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, '/src'),
},
},
});
it doesn't recognize…
entio
- 3,816
- 1
- 24
- 39
16
votes
7 answers
'does not provide an export named 'createRouter'' vue 3, vite and vue-router
I just started using vite with vue.
When I'm trying to use vue-router I get the error:
SyntaxError: The requested module '/node_modules/.vite/vue-router/dist/vue-router.esm.js?v=4830dca4' does not provide an export named 'createRouter
My…
Maiken Madsen
- 611
- 1
- 15
- 29
15
votes
2 answers
Airbnb does not show up in ESLint init style guides
Trying to setup ESLint with Airbnb style guide for my new React Vite Typescript project.
After running npx eslint --init and npm init @eslint/config, and selecting all the aforementioned options, I still can't find the Airbnb style guide option in…
Usman Ahmed
- 161
- 1
- 4
15
votes
2 answers
Styling the body element in svelte
My goal is to make a darkmode for my web app.
To get my setup enter npm init vite and pick svelte as a framwork. Then follow the command line instructions. Go to src > App.svelte:
Try the following:
body {
background: black;
}
You will get…
Felkru
- 310
- 2
- 12
15
votes
3 answers
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 file:
import { defineConfig } from…
i am bad at coding
- 555
- 1
- 3
- 14
15
votes
5 answers
In vite, is there a way to update the root html name from index.html
I'm trying to update an existing project to vite but i read in the docs Vite expects an index.html file to work from.
Is there anyway to specify another file name from which vite should build?
in my case main.html
blu10
- 534
- 2
- 6
- 28
15
votes
5 answers
ESLint Vue multiword components
Is there a way to stop getting error from ESLint for single word view name in Vue3?
Every time I run ESLint, I get following message:
1:1 error Component name "About" should always be multi-word vue/multi-word-component-names
I currently have…
Tomkys
- 266
- 1
- 3
- 11
15
votes
4 answers
Polyfill node os module with vite/rollup.js
I'm working on a Vite project which uses the opensea-js package. This package depends on xhr2-cookies. which imports os, http, https and some other internal node modules.
I'm getting this error when trying to call any of the opensea…
Benedict Lewis
- 2,733
- 7
- 37
- 78
15
votes
4 answers
Skipping larger chunks while running "Npm run build"
Facing this problem while trying to run "npm run build"
(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking:…
Haseeb Saeed
- 599
- 2
- 4
- 19
15
votes
2 answers
How to set vite.config.js base public path?
I'm trying to set a base url for both my dev and prod environments, but vitejs configs are not resolved.
According to vitejs , you can set the base public path when served in development or production, in your config options.
When running vite…
Philx94
- 1,036
- 3
- 20
- 39
14
votes
2 answers
Uncaught (in promise) Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321
I am trying to create a new React app using Vite. What I have done so far is run the command npm create vite@latest. I was able to create the app, run npm install, npm run dev to run it on localhost. But when I opened console, there is an error…
May Nguyen
- 163
- 1
- 7
14
votes
2 answers
Uncaught SyntaxError: Export 'import_react3' is not defined in module (at chunk-ALR5B6M7.js?v=aa4e0109:17143:3)
I have a project created with create-react-app with Typescript. And I am using yarn 3.3.0 as the package manager.
Now I am trying to shift from cras webpack to vite. I have bootstrapped a project with the yarn create vite command. And simply copy…
Nahidujjaman Hridoy
- 1,175
- 12
- 28
14
votes
1 answer
Vite - How do I use a wildcard in Rollupjs build.rollupOptions.external?
I'm using Vite to build a library and I get the following error when building the library:
Rollup failed to resolve import "node:path"
By adding the failed import to the Rollup options I'm able to fix the error but the build continues to complain…
Carlton
- 531
- 1
- 5
- 19