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

Question

我有一个带有 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 依赖于以某种方式需要电子？

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

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

通过谷歌搜索这个错误让我找到了一些关于不在 gatsby-node.js 中加载包的答案，但这也没有帮助。

Answer 1

在 Gatsby 中处理使用 window 的第三方模块时，您需要将 null 加载器添加到其自己的 webpack 配置中，以避免在 SSR 期间进行转译（ S服务器-SideR渲染）。这是因为 gatsby develop 出现在浏览器中，而 gatsby build 出现在 Node 服务器中，显然没有 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 可能有效，但请记住，您正在添加另一个包，另一个可能会影响性能的捆绑文件。建议的代码段是构建应用程序时发生的内置解决方案。

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

gatsby build fails when adding mapbox-gl-geocoder to gatsby.js

mapbox

mapbox-gl

gatsby

netlify