I got it working, I had to add this to vite.config.js
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
nested: resolve(__dirname, 'mods/index.html')
}
}
And my final vite.config.js
is this
import { defineConfig } from "vite";
import { resolve } from "path";
import reactRefresh from "@vitejs/plugin-react-refresh";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh()],
build: {
outDir: "build",
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
mods: resolve(__dirname, 'mods/index.html')
}
}
},
server: {
strictPort: true,
hmr: {
port: 443 // Run the websocket server on the SSL port
}
}
});
For the /mods
path to work properly it needs to have the <script type="module" src="/src/index.jsx"></script>
on the mods/index.html
file still, I may create an example of a multipage react app using react router later