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

[francescocretti]

Description

Hi everyone, I installed the package in my current project and tried to replicate the basic example. At build-time I get the following error:

./node_modules/@vis.gl/react-google-maps/dist/index.modern.mjs
Can't import the named export 'Children' from non EcmaScript module (only default export is available)

I could be a problem coming from my environment but I wanted to know if anyone has ever encountered something similar. Thanks in advance.

Steps to Reproduce

• install vis.gl/react-google-maps
• create a simple component

const GoogleMapsTest: React.FC = () => {

  return (
    <APIProvider apiKey={API_KEY}>
      <Map
        zoom={3}
        center={{ lat: 22.54992, lng: 0 }}
        gestureHandling={'greedy'}
        disableDefaultUI={true}
      />
    </APIProvider>
  )
}

• import it in a route

Environment

• Library version: "@vis.gl/react-google-maps": "^0.4.1"
• Google maps version: weekly
• Browser and Version: Chrome 120
• OS: Mac OSX Ventura - Apple M2 Pro

Dependencies versions (from package.json):

"@mapbox/mapbox-gl-draw": "1.3.0",
"react": "17.0.2",
"react-scripts": "4.0.3",

Logs

No response

[usefulthink]

Can you elaborate a bit on your environment? Which bundler or build-steps are you using, how are they configured? Also maybe add the full source-file.

It seems strange that you are loading the .modern.js version, but apparently from a commonJS context (which should use the .umd.js).

[francescocretti]

Hi @usefulthink thanks for your reply. I'm working on a pre-existent React app made a couple years ago with CreateReactApp. So it uses webpack under the hood and all the bundling is managed through react-scripts and I don't have access to the source code unless I eject from CRA (I really don't want to do it :) ).

I'm trying the road to upgrade to react-scripts v5, that seems to be working.

I have other bundling issues now, but I don't think they have anything to do with this package.

I'll keep this issue posted as soon I figured a working solution!

[usefulthink]

That's really valuable for us to know, thanks!

[francescocretti]

Hi @usefulthink, I can confirm that with react-scripts v5 it works!

[usefulthink]

Thanks for the info! I think as create-react-app v5 has been published 2 years ago, we can ignore this for now.