React-mapbox-gl: TypeError: Cannot read property 'composite' of undefined AND ReferenceError: _typeof is not defined

[piaaaac]

When I add a ReactMapboxGl component I get these errors multiple times. The map starts rendering – ScaleControl and ZoomControl also appear – but it remains empty.

I tried reinstalling all node modules, installing a previous version of the package, using webpack 1 instead of vers. 2, but none of those measures changed this behaviour.

Error details:

Uncaught TypeError: Cannot read property 'composite' of undefined at WorkerTile.parse (blob:http://localhost:8080/e7f302b7-8cfd-490f-9f15-fa6b29b23651:947) at VectorTileWorkerSource.t (blob:http://localhost:8080/e7f302b7-8cfd-490f-9f15-fa6b29b23651:834) at VectorTileWorkerSource.t (blob:http://localhost:8080/e7f302b7-8cfd-490f-9f15-fa6b29b23651:857) at XMLHttpRequest.n.onload (blob:http://localhost:8080/e7f302b7-8cfd-490f-9f15-fa6b29b23651:1682)

and

Uncaught ReferenceError: _typeof is not defined at Object.exports.clone (blob:http://localhost:8080/e7f302b7-8cfd-490f-9f15-fa6b29b23651:2133) at new StyleDeclaration (blob:http://localhost:8080/e7f302b7-8cfd-490f-9f15-fa6b29b23651:1007) at i.setPaintProperty (blob:http://localhost:8080/e7f302b7-8cfd-490f-9f15-fa6b29b23651:1063) at new i (blob:http://localhost:8080/e7f302b7-8cfd-490f-9f15-fa6b29b23651:1038) at Function.StyleLayer.create (blob:http://localhost:8080/e7f302b7-8cfd-490f-9f15-fa6b29b23651:1119) at StyleLayerIndex.update (blob:http://localhost:8080/e7f302b7-8cfd-490f-9f15-fa6b29b23651:1216) at StyleLayerIndex.replace (blob:http://localhost:8080/e7f302b7-8cfd-490f-9f15-fa6b29b23651:1213) at Worker.setLayers (blob:http://localhost:8080/e7f302b7-8cfd-490f-9f15-fa6b29b23651:883) at Actor.receive (blob:http://localhost:8080/e7f302b7-8cfd-490f-9f15-fa6b29b23651:1654)

And here the dependencies in my package.json

"devDependencies": { "babel": "^6.23.0", "babel-core": "^6.23.1", "babel-loader": "^6.3.2", "babel-plugin-add-module-exports": "^0.2.1", "babel-preset-es2015": "^6.22.0", "babel-preset-react": "^6.23.0", "babel-preset-stage-0": "^6.22.0", "babel-preset-stage-2": "^6.22.0", "core-js": "^2.4.1", "css-loader": "^0.26.1", "d3": "^4.6.0", "geojson-polyline": "^1.0.0", "jquery": "^3.1.1", "node-sass": "^4.5.0", "react": "^15.4.2", "react-dom": "^15.4.2", "react-mapbox-gl": "^1.3.0", "sass-loader": "^6.0.2", "style-loader": "^0.13.1", "turf": "^3.0.14", "webpack": "^2.2.1" }

[alex3165]

Hey @piaaaac you probably pass a wrong style props to the map, this is an error that occur in mapbox-gl, could you send a link to a project with this error ?

[piaaaac]

I tried changing the style parameter (mapbox://styles/mapbox/basic-v9) and I get a different error: TypeError: Cannot read property 'mapbox' of undefined

See if you can access: https://bitbucket.org/piaaaac/ff-migrant-stories/src/7ae7f30893e04c62b12aa4f7a0922ef23c4bf643/src/components/StoryMap.jsx?at=master&fileviewer=file-view-default

[alex3165]

Do you have mapbox-gl installed in your node_modules ?

Try to run npm install --save-dev mapbox-gl

[piaaaac]

I tried installing it explicitly as you suggest (I thought since it's a dependency it installs automatically), but it doesn't change a thing.

I tried all the styles listed here: https://www.mapbox.com/android-sdk/examples/default-styles/ and I realized that the error TypeError: Cannot read property 'composite' of undefined disappears when using a style without vector shapes (mapbox://styles/mapbox/satellite-v9)

[dorthwein]

I'm running into a similar issue however only when I bundle my JS package. Running from hot reloader seems to work fine.

[dorthwein]

@piaaaac are you do any server side rendering on your app?

[dorthwein]

I was able to get my maps working by adding the following in my webpack build. Be sure to add it to both your server rendering config & your client config if you have 2 separate files.

module: { noParse: [ /node_modules\/json-schema\/lib\/validate\.js/, /node_modules\/mapbox-gl/, ], }

[piaaaac]

In the meantime I found a different solution for my project.
But still, I went back and tried to add noParse to the webpack config file but I still get similar errors.

[mark2685]

I'm running into a similar issue, what was your solution @piaaaac ?

[piaaaac]

@mark2685 I actually went for a completely different solution and made a simple map with d3...

[katbusch]

What worked for me is similar to what worked for @dorthwein but not identical. I was accidentally parsing the mapbox-gl and react-map-gl code in a jsx loader. If you're seeing this error I would suggest going through your webpack loaders and making sure you're excluding these files.

[stefanzero]

Adding this to webpack-config.js rules section worked for me:

      {
        test: /\.js$/,
        exclude: [
          /.*mapbox-gl.*/
        ],
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              [
                'latest', {
                  'modules': false
                }
              ]
            ]
          }
        }]
      }

[alex3165]

I will close this issue because of inactivity and I don't think it is relevant anymore.