配置动态导入后react-mapbox-gl的Feature在NextJS中仍无法渲染

当前实现存在React Context传递断层，是react-mapbox-gl搭配NextJS动态导入时最容易踩的隐性坑：

• 仅对自定义封装的Map组件配置了ssr: false的动态导入
• 但页面入口直接同步从react-mapbox-gl导入了Layer、Feature组件

Layer、Feature这类内置子组件依赖Map组件通过Context注入的地图实例才能完成渲染。这种导入方式会导致两个子组件在Map组件完成动态加载、初始化地图实例前就完成了模块注册，拿不到有效的地图实例引用，自然无法把Feature渲染到画布上。这也是为什么官方#146号议题的基础方案没法直接生效的原因——它没提到子组件的上下文依赖问题。

1. 移除pages/index.js文件里对Layer、Feature的直接导入，删掉这行代码：

   import { Layer, Feature } from 'react-mapbox-gl';
   

2. 修改lib/mapbox.js的封装逻辑，把需要用到的子组件和Map组件放在同一个模块作用域里，挂载为Map的静态属性，保证所有组件走同一个动态加载流程：
   修改后的完整代码：

   import ReactMap, { Layer, Feature } from 'react-mapbox-gl';
   
   const Map = ReactMap({
       accessToken: "pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A"
   });
   
   // 挂载子组件为静态属性，和Map组件共享加载上下文
   Map.Layer = Layer;
   Map.Feature = Feature;
   
   export default Map;
   

3. 回到页面文件，从动态导入的Map组件上获取子组件引用，不要从第三方包直接导入：
   修改后的pages/index.js完整代码：

   import React from 'react';
   import dynamic from 'next/dynamic';
   import 'mapbox-gl/dist/mapbox-gl.css';
   
   const Map = dynamic(() => import('../lib/mapbox'), {
       ssr: false
   });
   
   // 从Map组件上解构需要的子组件
   const { Layer, Feature } = Map;
   
   function HomePage() {
       return (
       <Map
           center={[-104.989713, 39.730212]}
           style="mapbox://styles/mapbox/streets-v9"
           containerStyle={{
               height: '100vh',
               width: '100vw'
           }}
       >
           <Layer type="circle" id="marker" paint={{
               'circle-radius': 50,
               'circle-color': '#E54E52',
               'circle-opacity': 1,
           }}>
               <Feature coordinates={[-104.995210, 39.754684]} />
           </Layer>
       </Map>);
   }
   
   export default HomePage;
   

• 后续如果用到Popup、Source、GeoJSONLayer等其他react-mapbox-gl内置组件，全部按照上面的方式在lib/mapbox.js里挂载为Map的静态属性再使用，避免出现上下文断裂
• 不要在页面级别的入口文件直接导入react-mapbox-gl的任何子组件，所有地图相关的组件必须和封装的Map组件走同一个ssr: false的动态加载流程

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