[polymer-cli] ... does not provide an export named 'default'

[ernsheong]

There are many npm modules out there that somehow do not work with polymer serve

The error is usually, e.g.:

The requested module '../../babel-runtime/core-js/object/keys.js' does not provide an export named 'default'

What can be done to solve this error (besides getting other modules to publish in ES6 module format)?

[lpellegr]

@ernsheong I have the same issue with some libraries that do not provide an ESM version of their packages. A simple workaround is to import the non esm version as a classical script in your index.html:

<script src="node_modules/x/y.js"></script>

It has the drawbacks to be loaded synchronously at app startup and pollute your globals but at least it makes it possible to use the library with polymer-cli.

[web-padawan]

Consider using Webpack which supports different modules formats, if you need the libraries not providing ES module output.

[jagcolombat]

Hi @web-padwan you have some example of code where you needed use this approach.
Cheers

[PeterC66]

Having tried out React in a project, I am now trying out Polymer, and find that I much prefer the approach.

I had the
requested module ... does not provide an export named 'default'
problem when I tried using some redux helper packages (redux-on-state-change and redux-logger), that I had used OK within theReact project. Annoying but not essential so I did not explore further.

However I am now trying to use OpenLayers (npm ol) and I get
The requested module '../../rbush/index.js' does not provide an export named 'default'
Rbush is used internally by OL.

I have tried
<script src="./node_modules/rbush/index.js"></script>
in index.html, but I get
Uncaught ReferenceError: module is not defined
referring to the module object in
module.exports = rbush;
line in rbush/index.js.
(The next line is module.exports.default = rbush;.)

Is there anything else I can try, as OpenLayers is essential to my project, and I would like to use Polymer? I am fairly new to the node environment, and am not experienced with webpack etc.

Update
I have now seen this issue in the OL github - Importing ES modules in browser does not work. This means I shall have to use a bundler, so I will explore the Polymer docs a bit further and raise a question if I need to.

[Elvynia]

Hi, anything new on this issue about ES6 module conversion ?

I don't know webpack and I'm stuck with several JS packages (invariant, to-camel-case, etc...) used by redux-actions in my polymer project. Could someone point out a webpack configuration to use with Polymer-CLI please ?

[web-padawan]

@elvy Polymer CLI does not have any webpack integration at the moment.

Check out this repo for a fully configured Polymer app built with webpack:
https://github.com/web-padawan/polymer3-webpack-starter

[Elvynia]

@web-padawan Thank you ! But I'm building a polymer 3 element project with a lot of elements in it (no index) and using TypeScript. I don't want to struggle with config for hours as I'm new to webpack but also to Polymer. I think I will just drop redux-actions package for now :/

For those who run into this problem because of redux-actions' non-module dependencies, an issue is opened here.

[web-padawan]

@Elvynia then, check out es-dev-server by @open-wc:
https://github.com/open-wc/open-wc/tree/master/packages/es-dev-server

I'm not sure if it supports TS but maybe there should be a way to make it work.
#open-wc channel in Polymer Slack is a good place to ask.

[Elvynia]

@web-padawan I'd really appreciate chatting in this channel but I need an invitation link !

[web-padawan]

@Elvynia this link should work.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.