Lottie-web: Uncaught SyntaxError: The requested module '../../node_modules/lottie-web/build/player/lottie.js' does not provide an export named 'default'

[vinhnghi223]

Browser and Browser Version: Chrome, Version 80.0.3987.122 (Official Build) (64-bit)

What did you do? Please explain the steps you took before you encountered the problem.
I followed this tutorial https://josephkhan.me/lottie-web/:
npm install lottie-web and thenimport lottie from 'lottie-web';

Then in the constructor() of the web component, I did the following:

this.anim= lottie.loadAnimation({
      container: this.shadowRoot.getElementById('anim'), 
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: './anim.json'
});

Later I start playing it: this.anim.play()

What did you expect to happen?
It works.

What actually happened? Please include as much _relevant_ detail as possible.
When the parent component appears, it does not render/show up. Instead there is this red error line in the console: Uncaught SyntaxError: The requested module '../../node_modules/lottie-web/build/player/lottie.js' does not provide an export named 'default'

[bodymovin]

hi, can you share a link with the project so I can check it out?
Besides this issue, any reason why you are not loading the library via the cdn?
You might get better performance keeping it out of your build.

[mikicof]

I’ve encountered the same error, it is because this does not provide a fully ES6 module.

It does when built via Webpack using the package.json main path and converting the file found into an ESM, but now that we have changed to Rollup.js we found out that we are unable to use it as a module.

Can you provide also an ES6 module?

Thank you