Named export 'use' not found in React module when using React Leaflet in Next.js

[omer-ye]

``When integrating React Leaflet into a Next.js application, the following error occurs during runtime:

SyntaxError: Named export 'use' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const { createContext, use } = pkg;
This error happens when rendering the /map route that uses React Leaflet components. React, expected to provide named exports (e.g., useState, useEffect), is treated as a CommonJS module, causing the application to crash.

This error happens when rendering the /map route that uses React Leaflet components. React, expected to provide named exports (e.g., useState, useEffect), is treated as a CommonJS module, causing the application to crash.

import * as React from 'react';
import DisplayWrapper from '@components/layouts/displayWrapper';
import { ReactNode } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

const MapView = (): JSX.Element => {
  const position: [number, number] = [51.505, -0.09]; // Example coordinates (London)

  return (
    <MapContainer
      center={position}
      zoom={13}
      style={{ height: '100vh', width: '100%' }}
    >
      {/* Add a Tile Layer */}
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
      {/* Add a Marker */}
      <Marker position={position}>
        <Popup>A pretty popup for this marker!</Popup>
      </Marker>
    </MapContainer>
  );
};

MapView.getLayout = (page: ReactNode) => (
  <DisplayWrapper>{page}</DisplayWrapper>
);

export default MapView;

[anaislcno]

Hello !
I had the exact same issue yesterday at work. And for me, the problem was : I reflexively installed the latest version of react-leaflet (so the 5), but it's only compatible with React 19, whereas our project is in React 18.
Hope it helps!