Reactjs React npm包：我是否需要一个不同的网页包配置才能确保ssr安全？

我维护一个小的npm包，目前我正试图在盖茨比网站上使用它。我不是一个网页专家，我正在努力使我的npm包ssr安全

目前，如果我尝试

gatsby build

，它将抛出以下错误：

为页面生成静态HTML失败-0.829s
WebPackageError:ReferenceError:未定义窗口

componentDidMount = () => {
  window.addEventListener( 'click', this.onClickCloseMenu, false );
} 

我已将以下文件添加到我的包中：

// allows us to use window server-side
const safeWindow = (typeof window === 'undefined') ? {
    addEventListener() {},
    removeEventListener() {},
  } : window;

export default safeWindow;

并在我的代码中导入对象：

import safeWindow from './safeWindow';
...
    componentDidMount = () => {
        safeWindow.addEventListener( 'click', this.onClickCloseMenu, false );
    } 

但不幸的是，这没有帮助。我已经在useEffect/componentDid（Un）挂载中使用了window，但我猜这是一个编译错误，所以我需要定义它。我的下一个猜测是，构建/缩小我的包以将其发布到npm再次破坏了这一点，但我不确定

这是我的网页配置：

var path = require('path');

module.exports = {
    mode: 'production',
    entry: './src/DataListInput.jsx',
    output: {
        path: path.resolve('lib'),
        filename: 'DataListInput.js',
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                use: 'babel-loader'
            },
            {
                test: /^(?!.*?\.module).*\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.module\.css$/,
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        modules: true
                    }
                }]
            }
        ]
    }
}

非常感谢您的帮助

找到npm包

更新

我很确定现在它有一些事情要做，就是把css和javascript捆绑在一个缩小的文件中，这个文件需要调用窗口和文档。有人经历过类似的事情吗？我如何解决这个问题

更新2

---

我通过删除css解决了这个问题。我创建了一个没有css的新的ssr安全npm包。它感觉更像是一个解决方案，而不是一个解决方案，所以我仍然对是否有一种方法可以捆绑css+javascript并与ssr兼容感兴趣

将

safeWindow

从常量更改为

getSafeWindow

函数应该可以修复它

在导入模块之前，先计算常数。而函数版本只有在运行时调用时才能访问窗口

const getSafeWindow = () => (typeof window === 'undefined') ? {
    addEventListener() {},
    removeEventListener() {},
  } : window;

---

谢谢你的回复！我要试试看！你知道为什么我的componentDidMount函数中的if（typeof window！=“undefined”）window.addEventListener（）失败了吗？我觉得它应该与这个推理一起工作。我检查了盖茨比的问题，我同意把它放在componentDidMount中应该工作。也许您仍在导入safeWindow，但它失败了？我认为这与我的webpack配置有关，即使我从代码中删除所有SetTimeout/addEventListeners并使用webpack，它仍然会在构建中提到window。所以我想我必须调整一下配置。也许你的网页配置捆绑了react和react dom。也许你可以把它们做成外部的：谢谢你的支持。它没有找到，但使用它却起了作用：但我仍然得到了盖茨比的相同窗口未定义错误。