ES modules export doesn't work with rollup

[geoffreylitt]

I'm using ExtPay in a project that uses the rollup bundler. I got this error when running the bundler:

[!] Error: 'runtime' is not exported by node_modules/webextension-polyfill/dist/browser-polyfill.js, imported by node_modules/extpay/dist/ExtPay.module.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/extpay/dist/ExtPay.module.js (1:21)
1: import { management, runtime, storage, windows } from 'webextension-polyfill';

It appears that none of those four symbols are exported by the 'webextension-polyfill' module.

For the moment I was able to work around the issue by importing the commonjs version, which worked great.

I'm not sure if this is just some specific problem with my setup, or might be a broader issue with the module version of the package. It seems like webextension-polyfill might have an unusual module export format? From the readme:

Be aware that the polyfill module does not export the browser API object, but defines the browser object in the global namespace (i.e. window).

[Glench]

Can you share the relevant parts of your rollup config?

On Sat, Jul 3, 2021 at 6:26 PM Geoffrey Litt @.***> wrote:

I'm using ExtPay in a project that uses the rollup bundler. I got this error when running the bundler:

[!] Error: 'runtime' is not exported by node_modules/webextension-polyfill/dist/browser-polyfill.js, imported by node_modules/extpay/dist/ExtPay.module.jshttps://rollupjs.org/guide/en/#error-name-is-not-exported-by-module node_modules/extpay/dist/ExtPay.module.js https://rollupjs.org/guide/en/#error-name-is-not-exported-by-modulenode_modules/extpay/dist/ExtPay.module.js (1:21) 1: import { management, runtime, storage, windows } from 'webextension-polyfill';

For the moment I was able to work around the issue by importing the commonjs version, which worked great.

I'm not sure if this is just some specific problem with my setup, or might be a broader issue with the module version of the package. It seems like webextension-polyfill might have an unusual module export format? From the readme https://github.com/mozilla/webextension-polyfill:

Be aware that the polyfill module does not export the browser API object, but defines the browser object in the global namespace (i.e. window).

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Glench/ExtPay/issues/10, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADOHBMFM6OC6N7EBWDR423TV6E7ZANCNFSM47YRJIZQ .

[geoffreylitt]

It seems like the key issue is using the @rollup/plugin-node-resolve rollup plugin which uses the node resolution strategy. I don't yet fully understand when this plugin is needed, but I currently use it in my project and it seems like it's necessary to import certain npm packages.

I made a minimal test repository that uses this plugin in the rollup config, which should make it trivial to reproduce the issue I'm seeing. Details in the readme there:

https://github.com/geoffreylitt/extpay-test

[kylekampy]

@geoffreylitt I ended up encountering this same issue due to having a similar setup. Could you share how you configured rollup to import the cjs version instead? Or did you just grab the .common.js version from dist instead of installing the npm module? Thanks :)

-- EDIT -- Stumbled into a solution myself. For anyone else, I added the rollup commonjs module (https://github.com/rollup/plugins/tree/master/packages/commonjs). This seemed to favor importing the .common.js. So my rollup config plugins are simply: plugins: [typescript(), nodeResolve(), commonjs()].

[geoffreylitt]

I'm sorry, it's been so long that I don't remember what I did. I ultimately switched my extension to using esbuild and now this isn't an issue anymore.

I think that I may have grabbed the commonjs version from dist as you describe, but not sure.

On Sat, Mar 19, 2022 at 8:05 PM, Kyle Kamperschroer < @.***> wrote:

@geoffreylitt https://github.com/geoffreylitt I ended up encountering this same issue due to having a similar setup. Could you share how you configured rollup to import the cjs version instead? Or did you just grab the .common.js version from dist instead of installing the npm module? Thanks :)

— Reply to this email directly, view it on GitHub https://github.com/Glench/ExtPay/issues/10#issuecomment-1073133190, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHEBAARY5QVHBXL26YAK2TVAZTTDANCNFSM47YRJIZQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>