我在工作场所遇到了类似的问题，我现在怀疑我们声明 webpack 配置的（类似）方式是罪魁祸首。但对我来说，仅仅改变 libraryTarget 没有任何效果。在描述了我们的设置后，我在下面的见解......

我们有一组可视化组件，我们捆绑到一个“库”中，然后将其导入到主项目中。主项目需要获取一些外部数据，但需要在整个库组件的任意位置使用。我们不想到处传递props。所以上下文，对吧？除了提供者（我们在“主”项目中设置和初始化）和使用者位于库边界的不同侧时，使用者的上下文始终未定义（或者更确切地说，无论“createContext”的默认值是什么） ...我们没有使用初始化程序）。

无论如何，快进一堆。如果我将库中的每个不同组件作为其自己独立的“条目”（在 webpack 文件中）更改为构建一个 index.js 文件，该文件可以导入并重新导出所有内容——并且只包含该文件作为单数“entry”（在 webpack 中）——然后事情开始起作用了。

因为 React 上下文 API 需要共享创建的 Context 对象，但共享的概念（我猜无论如何）是在module级别。它一定不是真正的全球性的。所以不同的入口点，不同的module，不同的上下文对象。消费者被冷落了。

我张贴的灵感来自于一个答案这个前面回答中不能读取属性未定义的“组件” -的WebPack构建的react组件插件。我在这里的问题似乎至少与React Context API not working from custom NPM component library 问题有些相关，而那些人仍在寻找答案 - 也许这会有所帮助。

我不得不在我的webpack.config.js和我的进行调整package.json来解决这个问题。

在 webpack.config.js

改变这个：

  libraryTarget: 'commonjs2'

对此：

      library: "EditablePopup",
      libraryTarget: 'umd'

以及添加mode: development到module.exports.

在 package.json

将我的一些移动dependencies到peerDependencies：

    // Change from this:
      "dependencies": {
        "html-react-parser": "^0.10.0",
        "leaflet": "^1.6.0",
        "react": "^16.12.0",
        "react-contenteditable": "^3.3.3",
        "react-dom": "^16.12.0",
        "react-leaflet": "^2.6.1",
        "webpack": "^4.41.5"
      },
      "peerDependencies": {
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-leaflet": "^2.6.1",
        "leaflet": "^1.6.0"
      }

    // to this:
      "dependencies": {
        "html-react-parser": "^0.10.0",
        "react-contenteditable": "^3.3.3",
        "webpack": "^4.41.5"
      },
      "peerDependencies": {
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-leaflet": "^2.6.1",
        "leaflet": "^1.6.0"
      }

我很确定它的webpack.config.js变化是踢球者。为了完整起见，以下是对该文件的更改：

    // webpack.config.js

    var path = require('path');
    module.出口 = {
        条目：'./src/EditablePopup.js',
        输出： {
            路径：path.resolve(__dirname, 'build'),
            文件名：'EditablePopup.js',
    ——       libraryTarget: 'commonjs2',
    + 库：“EditablePopup”，
    + libraryTarget: 'umd'
        },
    + 模式：“发展”，
        module： {
            规则： [
                {
                    测试：/\.js$/,
                    包括： path.resolve(__dirname, 'src'),
                    排除：/(node_modules|bower_components|build)/,
                    利用： [
                        {
                            loader: 'babel-loader',
                            选项： {
                                预设：['@babel/preset-env']
                            }
                        }
                    ]
                },
                { 
                    测试：/\.css$/, 
                    利用： [
                        { loader: 'style-loader' },
                        {加载器：'css加载器'}
                    ]  
                }
            ]
        },
        外部：{
            'react-dom': 'commonjs react-dom',
            传单：{
                commonjs: '传单',
                commonjs2: '传单',
                根：'L'
            },
            'react传单'：{
                commonjs: 'react传单',
                commonjs2: 'react传单',
                根：'react传单'
            },
            react：{
                commonjs: 'react',
                commonjs2: 'react',
                根：'react'
            }
        }
    };

也许您需要将自定义组件包装在withLeaflet? 我发现这个 SO 答案在使用react-leaflet.

使用 HOC 将使地图（以及其余的上下文）在createLeafletElement地图安装后在您的实现中可用。