Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Uncaught TypeError: Cannot read properties of undefined (reading 'klass') #11686

Closed
ntakouris opened this issue Apr 8, 2022 · 7 comments · Fixed by #11739
Closed

Uncaught TypeError: Cannot read properties of undefined (reading 'klass') #11686

ntakouris opened this issue Apr 8, 2022 · 7 comments · Fixed by #11739
Labels
bug 🐞

Comments

@ntakouris
Copy link

ntakouris commented Apr 8, 2022 •
edited

After updating to latest mapbox-gl 7.20.3, in order to solve #11457, we get a new error:

Uncaught TypeError: Cannot read properties of undefined (reading 'klass'), every time we pan (and on map load). Sattelite tiles are indeed rendered, but the vector openstreetmap tiles (are names, some roads, etc) are not.

mapbox-gl-js version: 7.20.3

Edit: can confirm that this also works with latest versions (mapbox 2.8), published ~20h ago
@ntakouris
Copy link
Author

It seems that downgrading to mapbox-gl@2.2 renders those styles without issue.

@Aeropath
Copy link

+1 issue for mapbox-gl 2.8
Issues with create-react-app and the worker-loader approach I think.

I can get it to work fine during dev, but not after a build.

@SnailBones
Copy link
Contributor

@ntakouris Would you be able to provide a reproduction of this issue in CodePen or JSBin to help us get this resolved?

This may be the same as #11684

@avpeery
Copy link
Contributor

avpeery commented Apr 11, 2022

@ntakouris what is your setup like? Are you using a transpiler, like Babel? Thanks for reporting this issue!

@avpeery
Copy link
Contributor

avpeery commented Apr 11, 2022

@Aeropath what is your browserlist? Have you tried excluding mapbox from being transpiled? https://docs.mapbox.com/mapbox-gl-js/guides/install/#excluding-mapbox-gl-js-explicitly-from-transpilation

@mourner mourner mentioned this issue Apr 12, 2022
Merged
5 tasks
@avpeery
Copy link
Contributor

avpeery commented Apr 13, 2022

@ntakouris @Aeropath thanks for reporting this issue! We've released a patch v2.8.1 that should fix your error! Thanks!

@vladd11
Copy link

vladd11 commented Apr 19, 2022 •
edited

Hello. I'm still getting this issue.
Error: Uncaught TypeError: Cannot destructure property 'klass' of 'Cr[e]' as it is undefined.

My code:

import Head from 'next/head'
import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp';
import MapboxWorker from 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker';
import {createRef, useEffect} from "react"; // Load worker code separately with worker-loader

mapboxgl.accessToken = 'CENSORED'
export default function Home() {
    mapboxgl.workerClass = MapboxWorker; // Wire up loaded worker to be used instead of the default

    const map = createRef()
    const mapContainer = createRef()

    useEffect(() => {
        if (map.current) return;
        map.current = new mapboxgl.Map({
            container: mapContainer.current, // container ID
            style: 'mapbox://styles/mapbox/streets-v11', // style URL
            center: [-74.5, 40], // starting position [lng, lat]
            zoom: 9 // starting zoom
        })
    })

    return (
        <div className={styles.container}>
            <Head>
                <title>Create Next App</title>
                <meta name="description" content="Generated by create next app"/>
            </Head>
            <div id="map" ref={mapContainer}></div>
        </div>
    )
}

I'm using React.js with Next.js (HTML export/static site).
Mapbox GL JS version: 2.8.1

@vladd11 vladd11 mentioned this issue Apr 19, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐞
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix CSP bundle by not mangling class names there, and add CSP tests mapbox/mapbox-gl-js
5 participants
@ntakouris @SnailBones @vladd11 @Aeropath @avpeery