Capacitor and RollUp

I have an existing Cordova app that I’m trying to migrate to Capacitor, but I hit a roadblock.

My app is written in Typescript and uses RollUp for bundling. It’s working perfectly, but I get errors when using Capacitor.

import {Capacitor}  from '@capacitor/core';
const platform = Capacitor.getPlatform();

works fine.

However, if I add something like this in code:

import {ScreenOrientation} from '@capacitor/screen-orientation';

Then bundling fails with this message:

Error [RollupError]: Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.

I don’t understand what’s going on and why it wants a “code-splitting build”.

Does anyone have any experience with this? What would be the workarounds? (Don’t suggest replace rollup, I’m quite happy with it).

The error you’re encountering is related to Rollup’s output format, not Capacitor. The “iife” (Immediately Invoked Function Expression) and “umd” (Universal Module Definition) formats are not supported for code-splitting builds.

You’re trying to bundle a project that uses dynamic imports or, in your case, certain Capacitor plugins.

Here are a few potential solutions:

  1. You could change the output format to “esm” (ES Module), which supports code-splitting. However, this might not be compatible with all your target environments.
  2. You can add inlineDynamicImports: true to your Rollup configuration. This option will inline the dynamically imported modules into the generated bundle, thus avoiding the need for code-splitting. However, this could lead to larger bundle sizes.
  3. You can bundle certain dependencies separately. If only a few dependencies are causing the issue, you could try bundling them separately and then loading them as scripts in your HTML.