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

[zehawki]

Get an error as follows after upgrading from 1.16.1 to 2.0.3

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)

[zehawki]

This happens with CRA4 (which uses Webpack 4) and its an old known issue. One solution is to install and use Craco 6.4.5 in particular and then in craco.config.js add:

module.exports = {
  webpack: {
    configure: {
      module: {
        rules: [
          {
            type: 'javascript/auto',
            test: /\.mjs$/,
            include: /node_modules/,
          },
        ],
      },
    },
  },
}

[zehawki]

See similar discussions:

1. Module not found errors yet-another-react-lightbox#7
2. TypescriptError: Can't resolve "Module not found: yet-another-react-lightbox#61
3. Can't import the named export 'XXX' from non EcmaScript module (only default export is available) facebook/create-react-app#10356