ES6 import gives an "no default export" error

[MikePooh]

If follow the manual on the main page

You can use Plyr as an ES6 module as follows:

import Plyr from 'plyr';

const player = new Plyr('#player');

An error on JS console occured 127.0.0.1/:1 Uncaught SyntaxError: The requested module '/static/js/plyr.js' does not provide an export named 'default'

[sampotts]

That's a little odd as the "module": "dist/plyr.min.mjs", in package.json references plyr.min.mjs which definitely has export default Plyr. I'll do some more digging.

[MikePooh]

I was importing "plyr.js" should I import an *.mjs file?

[ondratra]

I am also experiencing this problem and it was also reported in https://github.com/sampotts/plyr/issues/1361 . When i use import * as Plyr from 'plyr' everything works fine. I think the module doesn't get exported properly in final build, thus maybe it's problem of building process because of default export is indeed in source code as @sampotts mentioned.

[attenzione]

That's a little odd as the "module": "dist/plyr.min.mjs", in package.json references plyr.min.mjs which definitely has export default Plyr. I'll do some more digging.

The problem is with Webpack configuration, because resolve.mainFields by default is ['browser', 'module', 'main'] and Plyr package.json contains definition "browser": "dist/plyr.min.js".

I suggest to change webpack.config.js

module.exports = {
  //...
  resolve: {
    mainFields: ['module', 'main'], // default ['browser', 'module', 'main']
  },
};

and use a nice syntax

import Plyr from 'plyr';

const player = new Plyr('#player');

This is now working on our production.