build.emptyOutDir not working with modules/dynamic imports

[passchn]

Vite config:

build: {
        emptyOutDir: true,
        outDir: './webroot/dist',
        manifest: true,
        rollupOptions: {
            input: {
                main: './webroot_src/main.ts',
            },
        },
    },

Generated html:

The green scripts are inserted by the plugin, but the red above come from vite. Vite expects the outDir to be the root which is accessible by apache etc.

So there is no /dist prefix and dynamic modules cannot be loaded.

A solution would be to set outDir to ./webroot. But then, vite will remove all files in webroot if emptyOutDir is true.

Does anyone have an idea how to fix that? If not, emptyOutDir would not work if you have static assets in webroot that don't come from vite.

You would have to delete the /assets folder before building manually here and there (not a big deal though).

[t0byman]

Maybe load the those (legacy) plugins scripts in a vite script entry instead of through ViteScripts->script ?

[passchn]

The legacy scripts are correctly loaded (green -> correct).

The problem is with the init-cart stuff (red border, above) which comes from an es module. It is loaded dynamically and inserted via javascript.

As you see, the url begins with /assets instead of /dist/assets.

[passchn]

This is because the outDir in vite is set to ./webroot/dist and, therefore, vite seems to expect that dist/ is kind of my root on the domain.

[bor-attila]

How the init-cart.css comes into the play?
The ./webroot_src/main.ts imports something what imports the init-cart.css ? Where the init-cart.css is located ?

Also there is a root option in vite.