Gatsby/Maplibre/Webpack-Error: maplibre_gl__WEBPACK_IMPORTED_MODULE_2__.maplibregl is undefined

Question

I like to show a maplibre map in my gatsby site. I can do it in React.

gatsby develop does not show me an error. but I get in firefox on runtime this error:

maplibre_gl__WEBPACK_IMPORTED_MODULE_2__.maplibregl is undefined

In Chrome it looks like this:

This are my dependencies in 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"
 }

This is my component 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

And this is the way I integrate it in my page.

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 does not show me an error. But in develper tools of the browser I see

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

System: OS: 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 Binaries: Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node Yarn: 1.22.5 - /usr/bin/yarn npm: 7.6.2 - ~/.nvm/versions/node/v14.16.0/bin/npm Languages: Python: 2.7.18 - /usr/bin/python Browsers: 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-plugin-manifest: ^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-source-filesystem: ^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

Because I am not sure if it is an error in Gatsby, I have also asked the question here: https://github.com/gatsbyjs/gatsby/discussions/33064

score 1 · Answer 1 · answered Sep 06 '21 at 11:59

I think your issue appears because of the webpack's transpilation. To summarize, you need to add a null loader to some dependencies that use the window and other global objects (such as document, etc) because in the SSR (Server-Side Rendering) they are not even defined yet, so the compilation fails.

I would suggest adding the following in your 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 is the API that Gatsby uses to override webpack's default configuration and basically, all that snippet adds a null loader to your map. As you can see, is a regular expression to the test matches the path in the node_modules folder.

You may need to change maplibre-gl to mapbox-gl, since one may rely on the other.

This thread adds some insightful solutions depending on the dependency versions that you can also try: https://github.com/mapbox/mapbox-gl-js/issues/10565

score 0 · Answer 2 · answered Sep 14 '21 at 10:29

0

I have found the solution. In my case it was not webpack and not a problem with the global window object. I changed the import from import { maplibregl } from "maplibre-gl" to import * as maplibregl from "maplibre-gl". After that it worked.

answered Sep 14 '21 at 10:29

astridx

6,581
4
17
35

Gatsby/Maplibre/Webpack-Error: maplibre_gl__WEBPACK_IMPORTED_MODULE_2__.maplibregl is undefined

2 Answers2