React Leaflet CDN部署报错：无法读取null的useState属性求助

搭建了基于CDN的基础React与React Leaflet环境，但运行失败，疑似React-Leaflet使用了不同上下文/版本的React环境，报错信息如下：

react.production.js:522 Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at o.useState (react.production.js:522:33)
    at g (MapContainer.js:5:21)
    at te (react-dom-client.production.js:3681:21)
    at si (react-dom-client.production.js:5432:15)
    at G1 (react-dom-client.production.js:6927:14)
    at ev (react-dom-client.production.js:10860:14)
    at My (react-dom-client.production.js:10743:37)
    at Vc (react-dom-client.production.js:10724:7)
    at tv (react-dom-client.production.js:10332:40)
    at dv (react-dom-client.production.js:11471:3)
    at I (scheduler.production.js:143:44)

对应的HTML页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.25.3/babel.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""></script>

    <script src="https://cdn.tailwindcss.com"></script>

    <style>
        .example { display:none;position:absolute;border:1px solid black;background-color:silver}
        .example.shown { display:block;position:absolute;border:1px solid black;background-color:silver}
        html,body {box-sizing: border-box; height: 100%;}
        .fullHeight {
            height: 100%;
        }
        .flex-box-vertical {
            display: flex;
            flex-flow: column;
        }
    </style>
</head>
<body>
    <div id="main" class='fullHeight'></div>
    
    <script type="text/babel" data-type="module">
        import { MapContainer } from 'https://cdn.esm.sh/react-leaflet/MapContainer'
        import { TileLayer } from 'https://cdn.esm.sh/react-leaflet/TileLayer'
        import { Popup } from 'https://cdn.esm.sh/react-leaflet/Popup'
        import { Marker } from 'https://cdn.esm.sh/react-leaflet/Marker'

        import React from "https://esm.sh/react@19.0.0"
        import ReactDOMClient from "https://esm.sh/react-dom@19.0.0/client"

        const App = () => <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>

        let app = ReactDOMClient.createRoot(document.querySelector("#main"))
        app.render(<App/>)


    </script>
</body>
</html>

解决思路 #

• 降级React到稳定版本：React 19目前是预览版，react-leaflet尚未针对其适配，换成React 18.x稳定版（如18.3.1），确保依赖兼容性。
• 统一CDN模块的React依赖：通过esm.sh参数强制指定react-leaflet使用与你导入一致的React版本，例如将react-leaflet的导入改为：

  import { MapContainer } from 'https://cdn.esm.sh/react-leaflet@4.2.1?deps=react@18.3.1,react-dom@18.3.1'
  

  其他组件同理，避免模块拉取不同版本的React导致上下文冲突。
• 调整导入顺序：先导入React和ReactDOM，再导入react-leaflet的组件，确保React上下文先被初始化。
• 给MapContainer设置明确高度：默认情况下MapContainer没有高度，可能引发渲染异常，添加样式属性：

  <MapContainer style={{height: '100%'}} center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
  

内容的提问来源于stack exchange，提问作者John Gorter