我有一个带mapbox-gl的gatsby.js应用程序，并且在我尝试包括mapbox-gl-geocoder程序包以添加搜索功能之前，所有程序均成功运行。
我已经使用npm如下安装它：
npm install mapbox/mapbox-gl-geocoder --save
然后，将其添加到React组件中：
import '@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
在useEffect挂钩中：
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
zoom: 20,
placeholder: 'Enter City',
mapboxgl: mapboxgl
}), 'top-left'
);
在本地运行时，gatsby develop它可以正常运行，但是在使用Netlify进行部署时，出现以下错误：
:24:21 PM: error Generating SSR bundle failed
1:24:21 PM: Can't resolve 'electron' in '/opt/build/repo/node_modules/@mapbox/mapbox-sdk/node_modules/got'
1:24:21 PM: If you're trying to use a package make sure that 'electron' is installed. If you're trying to use a local file make sure that the path is correct.
似乎mapbox-gl-geocoder依赖于@ mapbox / mapbox-sdk，而mapbox-sdk依赖于某种方式需要电子？
我只能在npm页面上读到有关电子的以下内容：
Electron support has been removed
The Electron net module is not consistent with the Node.js http module. See #899 for more info.
无论如何，我都尝试使用npm安装电子版，以查看错误是否消失，并且该构建开始失败并出现新错误，指示该窗口对象不可用。
10:35:45 AM: error "window" is not available during server side rendering.
谷歌搜索该错误导致我得到了一些关于不加载程序包的答案，gatsby-node.js但这也无济于事。
当使用第三方模块处理window的盖茨比你需要一个添加null的SSR（在加载器自身的配置的WebPack避免transpilation小号erver-小号IDE [R endering）。这是因为gatsby develop发生在浏览器中，而gatsby build发生在显然没有awindow或其他全局对象的Node服务器中。
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /@mapbox/,
use: loaders.null(),
},
],
},
})
}
}
请记住，该test值是一个正则表达式，将与下面的文件夹匹配，node_modules因此请确保/@mapbox/正确的名称。
使用补丁程序包可能有效，但请记住，您要添加另一个程序包，另一个捆绑文件，这可能会对性能产生影响。建议的代码段是内置的解决方案，会在您构建应用程序时发生。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句