"Error loading dynamically imported module" when using Rollup

Add-ons Development
#1

GitHub repo
I’m using Rollup to include npm packages in my content scripts.

Recreate issue:

  1. Clone the repo
  2. pnpm install
  3. pnpm run rollup-build
  4. pnpm run dev
  5. If the ext works as expected, you’ll see the codeblocks’ background color turns to black. Instead, you’ll see this message in the console:
    TypeError: error loading dynamically imported module: https://stackoverflow.com/questions/76319880/wasm-CR5DIDIU.js

I don’t know exactly what caused this error, but this only happens when Rollup bundles code into multiple chunks.
I can instead configure rollup.config.js to bundles into one single big file like this:
From

{
    dir: 'dist',
}

to

{
    file: 'dist/content.js',
    format: 'iife',
    inlineDynamicImports: true
}

Rollup will instead create one single file, the error disappears, and my ext works as expected in development. However the output file would be too big and I can’t sign the extension:

"This file is not binary and is too large to parse. Files larger than 4MB will not be parsed. Consider moving large lists of data out of JavaScript files and into JSON files, or splitting very large files into smaller ones.

So I think I have to keep the multiple chunks, but I have no idea how to fix the dynamically imported error. What should I try?

1 Like
#2

Well, this may be complicated - if the file you are building is a content script - because content scripts doesn’t support dynamic loading (modules with import/export syntax).

You could however create two content scripts and then inject them separately (using “scripting.executeScript” API) as they are needed (this may be of course impossible in some cases).

But I suspect you are building something with WASM and it’s serialized and inlined into the JS file as some base64 string, correct?

There is another way of loading WASM in content scripts:

As you can see, the WASM file can be dynamically loaded as needed.

PS:
If you plan to inject content script into every page user loads, it should be as small as possible - because it’s slow to parse/execute and it’s not cached.

1 Like