0

我喜欢在我的 gatsby 网站上展示 maplibre 地图。我可以在 React 中做到这一点。

gatsby develop没有显示错误。但是我在运行时进入Firefox这个错误：

maplibre_gl__WEBPACK_IMPORTED_MODULE_2__.maplibregl is undefined

a1

在 Chrome 中它看起来像这样：

a2

这是我的依赖项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 Fossa) CPU：(2) x64 Intel(R) Pentium(R) CPU 4417U @ 2.30GHz Shell：5.0.17 - /bin/bash 二进制文件：节点：14.16。 0 - ~/.nvm/versions/node/v14.16.0/bin/node 纱线：1.22.5 - /usr/bin/yarn npm：7.6.2 - ~/.nvm/versions/node/v14.16.0/bin /npm 语言：Python：2.7.18 - /usr/bin/python 浏览器：Chrome：92.0.4515.159 Firefox：91.0 npmPackages：gatsby：^3.13.0 => 3.13.0 gatsby-image：^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-自动链接标题：^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-源文件系统：^3.13.0 => 3.13.0 gatsby-transformer-remark：^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

4

2 回答 2

1

我认为您的问题是由于 webpack 的转译而出现的。总而言之，您需要为null一些使用window和其他全局对象（例如document等）的依赖项添加加载器，因为在 SSR（服务器端渲染）中它们甚至还没有定义，因此编译失败。

我建议在您的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),
    },
  ];

};

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

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

该线程根据您也可以尝试的依赖版本添加了一些有见地的解决方案：https ://github.com/mapbox/mapbox-gl-js/issues/10565

于 2021-09-06T11:59:50.170 回答
0

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

于 2021-09-14T10:29:30.267 回答