We Keep Coding

Vite 4 fails to emit JS bundle

I have upgraded from Vite 2.9.13 to 4.0.4, and to be on theme with the version number Vite can not find the entry point for JS anymore. It emits everything correctly except the JavaScript bundle which ends up like below. No error messages or anything.
// main-12345678.js
import "./reset-12345678.js";
const customfonts = "";
const style = "";
//# sourceMappingURL=main-12345678.js.map
// Where is the rest of my bundle? ¯\_(ツ)_/¯
Any ideas as to why I get a blank page and the almost empty JS bundle above?
vite --mode staging --config vite.config.js build
// vite.config.js
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
export default defineConfig(({ command, mode }) => ({
plugins: [react()],
root: "client",
build: {
sourcemap: mode !== "production",
minify: mode !== 'production' ? false : 'esbuild',
outDir: "dist/publish",
rollupOptions: {
input: {
main: new URL("./client/index.html", import.meta.url).pathname,
other: new URL("./client/other.html", import.meta.url).pathname,
},
},
},
}));

Using Vite with multiple entry points, occasionally getting extra files in output folder

I have 2 entry points to my app, with vite-config.js setup as follows:
export default defineConfig({
build: {
emptyOutDir: false,
manifest: true,
outDir: 'dist',
rollupOptions: {
input: {
app: '/src/app/app.js',
pub: '/src/app/pub.js'
}
},
commonjsOptions: { include: [] }
},
optimizeDeps: { disabled: false },
plugins: [vue()]
})
This results in 1 manifest.json file, and the corresponding app.css/js/pub.css/js in my dist folder, along with any other assets that my app references like images.
Occasionally, running vite build will result in an extra set of CSS/JS files in my dist folder. This extra file set is a random component or JS file from my codebase or node_modules, and oftentimes will contain a bunch of code that should be in dist/app.js. I'm tearing my hair out trying to figure this out. I've updated from Vite 3 to 4 and tried every adjustment I can find for the config file. Here's an example where InputRadios.vue, a component from my repo, is showing up and contains most of my app code.
[dist]
[assets]
- app.css
- app.js
- InputRadios.js
- InputRadios.css
- logo.svg
- pub.js
- pub.css
If I comment out any references to InputRadios.vue, then e.g. VueRouter.css/js appears in the dist folder. If I comment out VueRouter, some other random file imported somewhere in my codebase shows up.
Should this be working the way I'm expecting, or am I misunderstanding how rollupOptions works?

I don't know why I was getting the above behavior with multiple input entries for rollupOptions, but here's my solution: use multiple vite configs.
vite.config-dev.js:
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig({
publicDir: false,
plugins: [vue()],
server: {
port: 3030,
strictPort: true
},
preview: {
port: 8080,
strictPort: true
}
})
vite.config-app.js:
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig({
build: {
emptyOutDir: false,
manifest: 'manifest-app.json',
outDir: 'dist',
rollupOptions: {
input: {
app: '/src/app/app.js'
}
}
},
plugins: [vue()]
})
vite.config-pub.js:
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig({
build: {
emptyOutDir: false,
manifest: 'manifest-pub.json',
outDir: 'dist',
rollupOptions: {
input: {
pub: '/src/app/pub.js'
}
}
},
plugins: [vue()]
})
package.json:
...
"scripts": {
"dev": "vite -c vite.config-dev.js",
"build": "vite build -c vite.config-app.js && vite build -c vite.config-pub.js",
...
This is running through an Express server that serves some private and some public pages, hence the 2 entry points. If anyone runs into this and needs full(er) code examples, post a comment.

How do I copy a static folder to both "dev" and "build" in Vite?

I'm trying to upgrade my Webpack based Vue.js project to Vite. I have folder structure like this:
- src/
- static/
- tests/
In Webpack, I was using CopyWebPackPlugin like this:
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: '',
ignore: ['.*']
}
]),
And copied all files inside the static folder to make it available on both dev and build.
I'd like to do the same via Vite but can't figure out what how to implement it.
I tried the following code but it didn't work.
viteStaticCopy({
targets: [
{
src: path.resolve(__dirname, '../static'),
dest: '/'
}
]
})

The following changes should be an equivalent to your previous CopyWebpackPlugin settings:
vite-plugin-static-copy does not support an explicit ignore option, but you can set the src glob pattern to exclude dotfiles.
The dest should be './' to copy the files into the root of the output directory (default is dist).
import { defineConfig } from 'vite'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import path from 'path'
export default defineConfig({
plugins: [
viteStaticCopy({
targets: [
{
src: path.resolve(__dirname, './static') + '/[!.]*', // 1️⃣
dest: './', // 2️⃣
},
],
}),
]
})
demo

How to inject production script and css to an index html with vite?

My vite.config.ts is:
import { defineConfig } from 'vite';
import react from '#vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
publicDir: './src/assets',
build: {
lib: {
entry: './src/main.tsx',
name: 'index',
fileName: 'index',
formats: ['iife']
}
},
server: {
host: true
}
});
How can I inject in the production script and css automatically in an html index?
like webpack does with html-webpack-plugin.
I'm new to vite (and to webpack too haha) and at least I couldn't find any configuration that would allow me to do something like that, is there a way to do it?
I hope you can help me c:

Want to use either of the 2 different .js files depending upon webpack build mode

This is my first question here.
I have two scripts: script.js and script-dev.js
Both scripts are located in 'static' folder(I am using NUXTJS)
Now, when webpack production build is used, ONLY script.js should be used and script-dev.js should be excluded/not used (sorry if i am using any incorrect term)
Similarly, for webpack development build, ONLY script-dev.js should be used and script.js should be excluded/not used.
(I am doing so because I will be using two diff API Urls in both files and script-dev.js will be used only for testing code in development. )
I have a nuxt.config.js file in root folder.
Can anyone please help me how can I modify the nuxt.config.js (or any other way you know) to achieve the above result.
here is my current nuxt.config.js and I have extended the webpack config as shown below (sorry for the improper formatting):
export default {
telemetry: false,
mode: 'universal',
server: {
host: '0.0.0.0',
port: 3000,
},
env: {
API_URL: process.env.API_URL,
},
serverMiddleware: [
{
path: '/r',
handler: '~/api/redirector.js',
},
],
build: {
extend(config, ctx) {
if (ctx.isDev) {
config.module.rules.push({
test: /.js$/,
exclude: [path.resolve(__dirname, 'static/script.js')],
})
} else {
config.module.rules.push({
test: /.js$/,
exclude: [path.resolve(__dirname, 'static/script-dev.js')],
})
}
},
},
}