This is a very basic example of remix app with leaflet map.

• Remix Docs

Open this example on CodeSandbox:

This example shows how to use Leaflet with Remix.

Relevant files:

• app/components/map.client.tsx

Leaflet cannot be rendered on the server side, so we're using the ClientOnly component from remix-utils to display a skeleton instead. It's important to add the .client.tsx suffix to the Map component file name, otherwise, you will get this error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /remix/examples/leaflet/node_modules/react-leaflet/lib/index.js from /remix/examples/leaflet/build/index.js not supported.

• Leaflet docs
• React Leaflet docs
• remix-utils