Gatsby/Maplibre/Webpack-错误: maplibre_gl__WEBPACK_IMPORTED_MODULE_2__.maplibregl未定义

Question

我喜欢在我的gatsby网站上展示maplibre地图。我可以在React中完成。

gatsby develop没有向我显示错误。但是我在运行时在firefox中得到了这个错误：

maplibre_gl__WEBPACK_IMPORTED_MODULE_2__.maplibregl is undefined

​

​

在Chrome中，它看起来像这样：

​

​

这是我在package.json中的依赖项

dependencies": {
   "gatsby": "^3.13.0",
   "gatsby-image": "^3.11.0",
   "gatsby-plugin-feed": "^3.13.0",
   "gatsby-plugin-layout": "^2.13.0",
   "gatsby-plugin-local-search": "^2.0.1",
   "gatsby-plugin-react-helmet": "^4.13.0",
   "gatsby-plugin-sharp": "^3.13.0",
   "gatsby-remark-autolink-headers": "^4.10.0",
   "gatsby-remark-images": "^5.10.0",
   "gatsby-remark-prismjs": "^5.10.0",
   "gatsby-source-filesystem": "^3.13.0",
   "gatsby-transformer-remark": "^4.10.0",
   "gatsby-transformer-sharp": "^3.13.0",
   "maplibre-gl": "^1.15.2",
   "prismjs": "^1.24.1",
   "prop-types": "^15.7.2",
   "query-string": "^7.0.1",
   "react": "^17.0.2",
   "react-dom": "^17.0.2",
   "react-helmet": "^6.1.0",
   "react-use-flexsearch": "^0.1.1"
 },
 "devDependencies": {
   "eslint": "^7.32.0",
   "eslint-config-react-app": "^6.0.0",
   "gatsby-plugin-manifest": "^3.13.0",
   "postcss": "^8.3.6"
 }

这是我的组件map.js

import React, { useEffect, useRef } from "react"
import PropTypes from "prop-types"
import { maplibregl } from "maplibre-gl"
import "maplibre-gl/dist/maplibre-gl.css"

import { siteMetadata } from "../../gatsby-config"

const Map = ({ zoom, center, minZoom, maxZoom }) => {
  const { mapboxToken, maptilerToken } = siteMetadata

  // this ref holds the map DOM node so that we can pass it into MapLibre GL
  const mapNode = useRef(null)

  // this ref holds the map object once we have instantiated it, so that we
  // can use it in other hooks
  const mapRef = useRef(null)

  useEffect(() => {
    let mapCenter = center
    let mapZoom = zoom


    const map = new maplibregl.Map({
      container: mapNode.current,
      style:
        `https://api.maptiler.com/maps/streets/style.json?key=YymZPIGfniu7apIvln6X`,
      center: mapCenter,
      zoom: mapZoom,
      minZoom,
      maxZoom,
    })
    mapRef.current = map
    // window.map = map // todo for easier debugging and querying via console

    map.on("load", () => {})

    return () => {
      map.remove()
    }
  }, [])
  return <div ref={mapNode} style={{ width: "100vh", height: "100vh" }} />
}

Map.propTypes = {
  center: PropTypes.arrayOf(PropTypes.number),
  zoom: PropTypes.number,
}

Map.defaultProps = {
  center: [0, 0],
  zoom: 0,
  minZoom: 0,
}

export default Map

这就是我将它集成到我的页面中的方式。

import * as React from "react"
import Map from "../components/map"


const IndexPage = () => (
  <>
    <h1>Hi people</h1>
    <p>
      Welcome to your new Gatsby Maplibre site. Here is a map without extras
    </p>
    <Map />
  </>
)

export default IndexPage

gatsby build没有向我显示错误。但是在浏览器的开发工具中，我看到

TypeError: o.maplibregl is undefined
    a map.js:24
    Fi React
    unstable_runWithPriority scheduler.production.min.js:18
    React 3
    D scheduler.production.min.js:16
    onmessage scheduler.production.min.js:12
react-dom.production.min.js:216:199
    React 5
    unstable_runWithPriority scheduler.production.min.js:18
    React 4
    unstable_runWithPriority scheduler.production.min.js:18
    React 4
    unstable_runWithPriority scheduler.production.min.js:18
    React 3
    D scheduler.production.min.js:16
    onmessage scheduler.production.min.js:12

系统: Linux 5.11 Ubuntu 20.04.3 LTS (Focal ) CPU：(2) x64英特尔(R)奔腾(R) CPU 4417U @2.30 usr外壳: 5.0.17 - /bin/bash二进制文件: Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node Yarn: 1.22.5 -/usr/bin/Pentium: 7.6.2 - ~/.nvm/versions/node/v14.16.0/bin插件语言: Python: 2.7.18 - /usr/bin/python浏览器: Chrome: 92.0.4515.159 Firefox: 91.0 npmPackages: gatsby：^3.13.0 => 3.13.0 gatsby- /npm -npmPackages：^3.11.0 => 3.11.0 gatsby-plugin-feed：^3.13.0 => 3.13.0 gatsby-plugin-layout：^2.13.0 => 2.13.0 gatsby-plugin-local-search：^2.0.1 => 2.0.1 gatsby-插件清单：^3.13.0 => 3.13.0 gatsby-plugin-react-helmet：^4.13.0 => 4.13.0 gatsby-plugin-sharp：^3.13.0 => 3.13.0 gatsby-remark autolink-headers：^4.10.0 => 4.10.0 gatsby-remark images：^5.10.0 => 5.10.0 gatsby-remark prismjs：^5.10.0 => 5.10.0 gatsby- => -filesystem：^3.13.0 =>3.13。0 gatsby-transformer-备注：^4.10.0 => 4.10.0 gatsby-transformer-sharp：^3.13.0 => 3.13.0 npmGlobalPackages: gatsby-cli: 3.13.0

因为我不确定这是否是Gatsby中的错误，所以我在这里也问了这个问题：https://github.com/gatsbyjs/gatsby/discussions/33064

Answer 1

我想你的问题出现是因为那个webpack的转译。总而言之，you need to add a null loader to some dependencies that use the window and other global objects (如document等)，因为在服务器端渲染中，它们甚至还没有被定义，所以编译失败。

我建议在您的gatsby-node.js中添加以下内容

exports.onCreateWebpackConfig = ({ actions, loaders, getConfig }) => {
  const config = getConfig();

  config.module.rules = [
    ...config.module.rules.filter(rule => String(rule.test) !== String(/\.jsx?$/)),
    {
      test: /maplibre-gl/,
      use: loaders.null(),
    },
    {
      test: /\.jsx?$/,
      use: { ...loaders.js() },
      exclude: modulePath => /node_modules/.test(modulePath),
    },
  ];

};

Gatsby使用onCreateWebpackConfig来覆盖webpack的默认配置，基本上，所有这些代码片段都会向您的地图中添加一个null加载器。如您所见，正则表达式将test与node_modules文件夹中的路径相匹配。

您可能需要将maplibre-gl更改为mapbox-gl，因为其中一个可能依赖于另一个。

这个线程添加了一些有洞察力的解决方案，这取决于您也可以尝试的依赖项版本：https://github.com/mapbox/mapbox-gl-js/issues/10565

Answer 2

我已经找到了解决方案。在我的例子中，这不是webpack的问题，也不是global window object的问题。我将导入从import { maplibregl } from "maplibre-gl"更改为import * as maplibregl from "maplibre-gl"。在那之后，它起作用了。