Why does Rollup complain about code-splitting when I am not code-splitting?

Question

With only one output entry in my rollup.config.js like so:

export default {
  input: './src/Index.tsx',
  output: {
    dir: './myBundle/bundle',
    format: 'iife',
    sourcemap: true,
  },
  plugins: [
    typescript(),
    nodeResolve(),
    commonjs(),
    babel(),
    json(),
    terser(),
  ],
};

Why does Rollup accuse me of code-splitting? [!] Error: UMD and IIFE output formats are not supported for code-splitting builds.

Lifesaver

Apparently from glancing at some github threads that came up when I googled your error message, you can't use dynamic imports with rollup if you're doing IIFE or UMD. If you're not using dynamic imports in your Typescript code, then IDK. – Recreate

I am using dynamic imports in my Typescript code. Does this mean my only option is to use ES module format in my output? – Lifesaver

No you can use commonjs (and probably AMD although I didn't check). You just can't use IIFE or UMD. But the dynamic import is why it's complaining about code splitting. Given how many github issues pop up on different repositories when you google that message, I'd say they may want a clearer one. – Recreate

My issue with CommonJS is that it outputs require into my bundle, which is not defined in the browser. – Lifesaver

Answer 1

Encountered this problem using Routify. Adding inlineDynamicImports: true in rollup.config.js solved the problem for me

export default {
input: "src/main.ts",
output: {
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/build/bundle.js",
    inlineDynamicImports: true, //Add this
},

svelte - import dependency package with error

Erny

inlineDynamicImports will early to bring side effect – Magnificent

Answer 2

You should set format equal to esm or es

Gossett

setting inlineDynamicImports to true resolved the issue for me even when format is set to 'system' as creates umd and es outputs. sorry I got only one vote on this – Romito