Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using ReactMapboxGl with next.js (isomorphic)

See original GitHub issue

I’m new to react and am trying to string together ReactMapboxGl with Next.js and it errors onload as ReactMapboxGl can’t load server side (errors with ReferenceError: self is not defined) but then works on subsequent hot reloads.

I’ve tried using require() within componentDidMount but get an error like this

Module build failed: TypeError: /components/mapLoader.js: Property name of JSXOpeningElement expected node to be of a type ["JSXIdentifier","JSXMemberExpression"] but instead got "Identifier"

I’m sure there’s just something up with my implementation but I am struggling to work out why? My whole repo is here — https://github.com/jonheslop/colwiki/

Any tips would be greatly appreciated, thanks 😄

Issue Analytics

State:
Created 7 years ago
Comments:24

Top GitHub Comments

14reactions

leerobcommented, Jan 13, 2019

I also stumbled on this and ended up writing a blog post on how to use Mapbox with Next.js.

You can find a working example and full code here.

6reactions

cherniavskiicommented, Apr 26, 2018

I think it can be resolved with dynamic imports now - see https://github.com/zeit/next.js#dynamic-import

Top Results From Across the Web

Using mapbox-gl in React with Next.js - DEV Community ‍ ‍

First of all, let's create a new project in Next.js using the Typescript template. npx create-next-app --typescript my-awesome-app.

Build Isomorphic Apps with Next.js - JScrambler Blog

In this tutorial, we'll build a simple timer component in React that is isomorphic and leverages Next.js for universal rendering.

React map library comparison - LogRocket Blog

This post provides an overview of several existing React map libraries and compares each based on functionality and ease of use.

react-mapbox-gl Features don't work with NextJS

I'm trying to use react-mapbox-gl with NextJS. Just trying to get the demo working, a map with a single Feature.

shengtaii/awesome-react - Gitee

next.js - The React Framework; gatsby.js - Free and open source framework based ... Isomorphic google map React component; react-mapbox-gl - A mapbox-gl-js ......