How to make it work with multiple inputs?

[WildH0g]

I have the issue that the plugin fails when I try to bundle multiple files. The error it throws is:

Invalid value for option "output.inlineDynamicImports" - multiple inputs are not supported when "output.inlineDynamicImports" is true.

This is my vite.config.js file:

import { defineConfig } from 'vite';
import { viteSingleFile } from 'vite-plugin-singlefile';
import { resolve } from 'path';

export default defineConfig({
  plugins: [viteSingleFile()],
  build: {
    emptyOutDir: false,
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        other: resolve(__dirname, 'other.html'),
      },
      output: {
        inlineDynamicImports: false,
      },
    },
  },
});

It only works if I either disable the plugin or only keep one input. The output.inlineDynamicImports setting doesn't do the trick, I still get the same error.

Thanks for your help.

[richardtallent]

Good question!

I don't use multiple input files for my use cases, but if you can create a standalone repository that demonstrates this limitation, I may be able to take a look at it and see if there's a solution. If practical, please start with this example build, since it's a minimal example and one I already test against:

https://github.com/richardtallent/vite-plugin-singlefile-example

[kidonng]

You need to disable useRecommendedBuildConfig.

[kamontat]

You need to disable useRecommendedBuildConfig.

This config does make build successful, however the output did not merge to single file as expected.

[delai]

Same problem here. Standalone repository here: https://github.com/fell-lucas/chrome-ext-template-preact-windi-vite As multi output files are recommended, I want every output file include all source code from dependence -- in other words: no import in output file at all.

[delai]

Is there any way to pacific one output file include all dependence source code, and meanwhile, another file use ES import as normal

[richardtallent]

Hi @delai,

This plugin was written with one purpose in mind: to use vite to be used to create an entire web page/site as a single file.

I've played around with the repo you posted, and immediately ran into the key issue: rollup does not support inlineDynamicImports=true when there are multiple input files:

https://rollupjs.org/guide/en/#outputinlinedynamicimports

This plugin depends on that option. Otherwise, you get inlined local JS, but the common JS chunks are not inlined, they are dynamically imported.

While you could probably write a plugin to do what you want, this one won't be reasonably capable of doing it.

If you can convince the rollup team to support this option with multiple input files, we can revisit the smaller changes in this plugin that would probably be needed to properly support multiple input files.

[delai]

ok, thank you for your replay!

[L1Q]

You need to disable useRecommendedBuildConfig.

This helped me today, thank you!

I would like to add another tip: set Vite's build.modulePreload to { polyfill: false }. Otherwise, it would add extra import statemtnt that breaks single file bundles from running. When everything is inlined in the html file, the preloading is meaningless anyway.