Can't import the named export 'Fragment' from non EcmaScript module (only default export is available)

[gabrielvieiraes]

Describe the bug

Failed to compile.

./node_modules/react-photo-album/dist/index.mjs Can't import the named export 'Fragment' from non EcmaScript module (only default export is available)

Expected behavior

Project does not compile when I try to use PhotoAlbum

How to reproduce

<PhotoAlbum
  layout="rows"
  photos={slides}
  targetRowHeight={150}
  onClick={({ index: current }) => setIndex(current)}
/>

<Lightbox index={index} slides={slides} open={index >= 0} close={() => setIndex(-1)} />

Screenshots / Logs

No response

Additional context

No response

[igordanchenko]

Your ticket does not provide sufficient details to troubleshoot your issue. Why don't you start by describing your environment? (Node version, React version, framework / build toolchain version, etc.)

[gabrielvieiraes]

Node - v16.20.0 React - ^16.12.0 craco/craco - ^5.6.2 Mantine - 6.0.19

[igordanchenko]

And what is your react-scripts (CRA) version?

[gabrielvieiraes]

"react-scripts": "^3.2.0"

[igordanchenko]

This is really outdated CRA version. Upgrading to react-scripts@^5 should resolve the error you are seeing - https://stackoverflow.com/a/72959074

To resolve this issue in CRA 3 / CRA 4 environment, you can force the webpack to use CJS version of this library instead of ESM. Here is an example using @craco/craco@5:

// craco.config.js

const path = require("path");

module.exports = {
  webpack: {
    alias: {
      "react-photo-album": path.resolve(
        __dirname,
        "node_modules/react-photo-album/dist/index.js",
      ),
    },
  },
};