Import problem: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

[LucienD]

My code:

import React from "react"

import MarkerClusterGroup from 'react-leaflet-cluster'
import { MapContainer, Marker, TileLayer } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'


export default function SiteMap (props) {

  const zoom = 5
  const position = {
    lat: 46.71109,
    lng: 1.7191036,
  }

  const addressPoints= [
    [46.71109, 1.7191036, "571"],
    [46.73211, 1.7191038, "572"],
    [46.76413, 1.8191040, "573"],
    [46.82615, 1.8191042, "574"],
    [46.88820, 1.9191044, "575"],
    [46.93925, 1.9191046, "576"],
    [46.96130, 2.1191048, "577"],
    [47.12340, 2.2191050, "578"],
    [47.43145, 2.4191052, "579"],
  ]

  return (
    <>
      <MapContainer className="content-tab" center={position} zoom={zoom} scrollWheelZoom={false}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>

        <MarkerClusterGroup>
          {addressPoints.map((address) => (
            <Marker key={address[2]} position={[address[0], address[1]]} />
          ))}
        </MarkerClusterGroup>

      </MapContainer>
    </>
  )
}

My package.json:

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "build": "node build.js",
    "watch": "node build.dev.js",
    "serve": "http-server -p 9000 -P http://localhost:9000?"
  },
  "author": "",
  "license": "MIT",
  "type": "module",
  "dependencies": {
    "react": "^18.2.0",
    "leaflet": "^1.9.4",
    "react-leaflet": "^4.2.1",
    "react-leaflet-cluster": "^2.1.0",
    "react-router-dom": "^6.12.1",
  },
  "devDependencies": {
    "http-server": "^14.1.1",
    "esbuild": "^0.18.2",
    "esbuild-plugin-sass": "^1.0.1"
  }
}

The error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

I don't understand why..

Thanks for the help

[shagr4th]

Got a similar issue... It's due to a specific behavior from esbuild, see here : evanw/esbuild#1849 (first paragraph of the "New behavior" section)

The fact you did set "type": "module" on your package, make esbuild convert import MarkerClusterGroup from 'react-leaflet-cluster' to an object like { default: MarkerClusterGroup }, and not the MarkerClusterGroup function itself... so you get an error like "got: object"