将 mapbox-gl-geocoder 添加到 gatsby.js 时，gatsby 构建失败

Question

我有一个带有 ma​​pbox-gl 的 gatsby.js 应用程序，在我尝试包含 ma​​pbox-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 有依赖关系以某种方式需要电子？

在 got 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 安装 electron 以查看错误是否消失，并且构建开始失败并出现新错误，表明窗口对象不可用。

10:35:45 AM: error "window" is not available during server side rendering.

谷歌搜索该错误导致我得到了一些关于未在 gatsby-node.js 中加载包的答案，但这也无济于事。

Answer 1

在处理 Gatsby 中使用 window 的第三方模块时，您需要在其自己的 webpack 配置中添加一个 null 加载器，以避免在 SSR 期间进行转译（Server-Side R渲染）。这是因为gatsby develop 出现在浏览器中，而gatsby build 出现在显然没有window or other global objects 的节点服务器中。

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /@mapbox/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

请记住，test 值是一个正则表达式，它将匹配 node_modules 下的文件夹，因此，请确保 /@mapbox/ 是正确的名称。

使用patch-package 可能会起作用，但请记住，您正在添加另一个包，另一个可能会影响性能的捆绑文件。建议的 sn-p 是在您构建应用程序时发生的内置解决方案。