ES6 Module issue

[onslauth]

Hi,

I am not 100% sure if this is the fault of this library, but I am trying to use it in a rails 7 application with importmaps.

It has been added to the import maps using the following command:

$ ./bin/importmap pin qr-code-styling --from unpkg
Pinning "qr-code-styling" to vendor/javascript/qr-code-styling.js via download from https://unpkg.com/[email protected]/lib/qr-code-styling.js

Which saves it to /vendor/javascript/qr-code-styling.js

It is then imported in the javascript controller with:

import QRCodeStyling from 'qr-code-styling'

And in the browser I get the following error:

SyntaxError: The requested module 'qr-code-styling' does not provide an export named 'default'

Am I doing something wrong here?

[JCcanizares]

I am facing the same issue. I am trying to import import QRCodeStyling from 'qr-code-styling' or import { QRCodeStyling } from 'qr-code-styling' and I see the same error. I have also tried to import the minified js file locally and the result is the same.

[josejames]

I have the same issue with the import on ES6, using node I made it work list this

import { QRCodeStyling } from 'qr-code-styling/lib/qr-code-styling.common.js'

but i don't think is the best way, and not sure but it kind of behaves weird sometimes 😅

[michallegro]

I guess it boils down to the fact that this library provides CJS and UMD packages, but it can fail in ESM build systems - the solution would be to configure webpack to also make ESM build