I've been trying to migrate my MUI-based React app to Vite and I've already found something that successfully generates a minimized production ready js file. Now I've been working on a dev-time configuration, but for that I want Vite only to periodically output non-optimized JS file to a designated folder. By "periodically" I mean "on every change to any of the source files". Also, I don't need Vite's dev server, as I want my JS file to be hosted my my .NET app.
Here's the vite.config.js
I've come up so far
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react';
export default defineConfig({
base: "/",
plugins: [react()],
define: {
'process.env.NODE_ENV': JSON.stringify('production'),
'process.env.REACT_APP_CLIENT': JSON.stringify('true'),
},
build: {
outDir: "../myIISServer/wwwroot",
emptyOutDir: true,
rollupOptions: {
input: "src/index.tsx",
output: {
entryFileNames: "main.min.js",
},
onwarn(warning, warn) {
// Suppress "Module level directives cause errors when bundled" warnings
if (warning.code === "MODULE_LEVEL_DIRECTIVE") return;
// Suppress "A comment /*#__PURE__*/" contains an annotation... " warnings
if (warning.code === "INVALID_ANNOTATION") return;
warn(warning);
},
}
}
})
In my package.json
I've defined two scripts:
"scripts": {
"dev": "vite build --watch",
"release": "vite build"
}
No issue with release
- it just works.
Regarding dev
- it successfully generates the first version of the file, but then on any modification of any of the source files it fails with the following error message:
build started...
✓ 3 modules transformed.
[commonjs] Cannot read properties of undefined (reading 'resolved')
I've tried running it with $env:DEBUG="vite:*"; npm run dev
but that didn't provide any extra diagnostic info.
My questions:
- How can I configure Vite to provide me with more information about the error (e.g. which package is causing this)?
- Is there a better way to achieve my goal (having a live watch searching for changes in source code)?
Versions I'm using:
- Vite 6.1.0
- React 18.2
- @mui/material 5.15.15
- TypeScript: 5.4.5