Dynamic Import Snippet for React with Typescript

[charlieforward9]

I am having a lot of trouble implementing a client-only component. Dynamic Imports most closely fit my use case.

I am still building experience in JS/TS/React, so it may be an experience thing, but the snippet provided throws a bug when I paste it, and I can't find my way around it.

setComponent(() => React.lazy(() => import("../../components/Map"))); in the snippet throws

Type 'LazyExoticComponent<() => Element>' is not assignable to type 'Element | (() => Element)'.

where the path exports:

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

export default function Map() {
  return (
    <div className="h-full w-full flex">
      <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    </div>
  );
}

[charlieforward9]

I renamed Map component in this snippet to LazyMap

[charlieforward9]

Seems like this is a known problem also mentioned here. It not due to the plugin, but I do think it is something worth mentioning in the docs for Typescript-based implementations.

[brillout]

Did you end up using @ts-ignore or did you find a solution?

worth mentioning in the docs

Agreed. PR welcome.

[charlieforward9]

I just ran the code with the error, and it works fine. You just taught me about @ts-ignore. Thank you! That's what I will go with.