firefox-addon

How to import npm packages in content script in an extension?

I'm trying to make a Firefox extension. So far all I have in my content script is

import isEven from 'is-even'

and I get back SyntaxError: import declarations may only appear at top level of a module. I then found this thread that suggests using dynamic import, so I tried

async function main() {
  // wrapped in a function because top-level await wasn't allowed
  const isEven = await import('is-even')
}
main();

and now I get The specifier “is-even” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.. It's not supposed to be a relative path, so I don't understand this error.

What do I need to change?

Solution

  • I still don't know how to fix this, but I ended up trying a bundler like that thread suggests (Rollup), it took a while to config but I made it work.