使用react-leaflet-heatmap-layer-v3遇src目录缺失警告及版本适配疑问

源映射警告原因 #

这个警告是因为react-leaflet-heatmap-layer-v3发布到npm时，只包含了编译后的lib目录产物，但库的源映射文件（.map）中仍然指向了未被打包进npm包的src目录下的TypeScript文件。开发环境的构建工具（如webpack）尝试解析这些源映射时找不到对应文件，因此抛出警告。该警告不影响代码运行，仅为开发环境的调试提示。

解决源映射警告的方法 #

• 忽略警告：如果不影响开发体验，可直接忽略此提示。
• 禁用特定库的源映射解析：若使用自定义webpack配置，可添加规则排除该库的源映射处理：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          enforce: 'pre',
          exclude: /node_modules\/react-leaflet-heatmap-layer-v3/,
          use: ['source-map-loader'],
        },
      ],
    },
  };
  

• 全局禁用源映射（Create React App项目）：在package.json的scripts中修改启动命令，关闭源映射生成：

  "scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start"
  }
  

React-Leaflet版本兼容性判断 #

是否需要降级react-leaflet取决于react-leaflet-heatmap-layer-v3的依赖要求：

1. 查看该库的peerDependencies：在项目的node_modules/react-leaflet-heatmap-layer-v3/package.json中找到peerDependencies字段，确认它支持的react-leaflet版本范围。
   • 如果要求的是^3.x，则当前使用的react-leaflet@4.2.1可能存在API兼容性问题（比如v4对Leaflet上下文、组件props的改动），需要降级到v3版本，执行命令：

     yarn add react-leaflet@^3.2.5
     

   • 如果支持^4.x，则版本无需调整，源映射警告仅为库打包时的小问题，不影响功能使用。

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