[!] RollupError: Invalid value for option "output.file" - when building multiple chunks, the "output.dir" ..

Issue

When using Rollup for bundling JavaScript code, if your code includes dynamic imports (using the import() function), Rollup treats them as separate chunks. Therefore, Rollup expects to output these chunks into a directory instead of a single file.

If your Rollup configuration is set to output to a single file (using the output.file option), it will throw an error when encountering dynamic imports:

[!] RollupError: Invalid value for option "output.file" - when building multiple chunks, the "output.dir" option must be used, not "output.file". To inline dynamic imports, set the "inlineDynamicImports" option.

Solution

There are two main ways to solve this issue:

1. Use output.dir instead of output.file: If you are okay with having multiple chunks as output, you can configure Rollup to output to a directory instead of a single file. This will allow Rollup to create multiple chunk files for each dynamic import.

output: {
  dir: './dist',
  format: 'es',
  sourcemap: !isProduction,
},

1. Inline dynamic imports: If you want a single file as output but also have dynamic imports in your code, you can set the inlineDynamicImports option to true in your Rollup configuration. This will inline all dynamic imports into the single output file.

output: {
  file: './dist/bundle.js',
  format: 'es',
  sourcemap: !isProduction,
  inlineDynamicImports: true,
},

Please note, when inlineDynamicImports is true, Rollup can only be used for single-entry point bundles.

Keep in mind, these solutions might require further adjustments in your codebase or build process, depending on the specific requirements of your project.