Mapbox-gl-js: Uncaught ReferenceError: n is not defined
Hello, this is a project where I wrap mapbox-gl in react-mapbox-gl. The project is build with webpack. Since a couple of hours, perhaps since I reinstalled my node_modules folder, I have the above error in the console, which only happens in production mode. The app is loaded as usual but the above error occurs and the map stays empty.
On the contrary, in dev mode, all seems to work.
I'm quite lost.
Can someone help out? What else do you need to know?
mapbox version 0.32.1
The blob below is requested by mapbox-gl-js, as I see it when looking into network tab in chrome dev tools.
Uncaught ReferenceError: n is not defined
205../support/isBuffer @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:10762
o @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:17
(anonymous) @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:19
167.util @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:7139
o @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:17
(anonymous) @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:19
177.../error/validation_error @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:7342
o @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:17
(anonymous) @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:19
190.../reference/latest.min @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:7973
o @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:17
(anonymous) @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:19
74.mapbox-gl-style-spec/lib/validate_style.min @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:3032
o @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:17
(anonymous) @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:19
65.../util/evented @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:2460
o @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:17
(anonymous) @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:19
71.../util/util @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:2884
o @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:17
(anonymous) @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:19
57.../style/style_layer_index @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:2088
o @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:17
(anonymous) @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:19
anonymous @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:11225
o @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:17
t @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:25
(anonymous) @ blob:http://localhost:3000/f4255dd1-610b-4e33-aad7-8e7d84ee8dfc:formatted:27
In this line the error is shown in the dev tools, underlined red:
).call(this, t("_process"), void 0 !== n ? n : "undefined" != typeof self ? self : "undefined" != typeof window ? window : {})
}
, {
"./support/isBuffer": 204,
"_process": 198,
"inherits": 203
}],
package.json
{
"name": "react-mapworks",
"version": "0.1.0",
"description": "Map design using OSM data.",
"engines": {
"npm": ">=3"
},
"scripts": {
"preinstall": "node tools/nodeVersionCheck.js",
"setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
"remove-demo": "babel-node tools/removeDemo.js",
"start-message": "babel-node tools/startMessage.js",
"prestart": "npm-run-all --parallel start-message remove-dist",
"start": "npm-run-all --parallel test:watch open:src lint:watch",
"open:src": "babel-node tools/srcServer.js",
"open:dist": "babel-node tools/distServer.js",
"lint": "esw webpack.config.* src tools --color",
"lint:watch": "npm run lint -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"prebuild": "npm run clean-dist && npm run lint && npm run test",
"build": "babel-node tools/build.js && npm run open:dist",
"test": "mocha tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
"test:cover": "babel-node node_modules/isparta/bin/isparta cover --root src --report html node_modules/mocha/bin/_mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
"test:cover:travis": "babel-node node_modules/isparta/bin/isparta cover --root src --report lcovonly _mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
"test:watch": "npm run test -- --watch",
"open:cover": "npm run test:cover && open coverage/index.html"
},
"author": "Oliver Bienert",
"license": "MIT",
"dependencies": {
"@mapbox/mapbox-gl-geocoder": "2.0.1",
"@turf/turf": "3.10.4",
"babel-runtime": "6.23.0",
"color": "1.0.3",
"d3": "4.7.0",
"file-saver": "1.3.3",
"flexbox": "0.0.3",
"geojson2svg": "1.0.6",
"immutable": "3.8.1",
"immutablediff": "0.4.4",
"lodash": "4.17.4",
"material-ui": "0.17.0",
"moment": "2.17.1",
"moment-timezone": "0.5.11",
"normalize.css": "5.0.0",
"object-assign": "4.1.1",
"proj4": "2.3.17",
"pubsub-js": "1.5.5",
"react": "^15.4.1",
"react-color": "2.11.1",
"react-dom": "^15.4.1",
"react-file-reader-input": "1.1.0",
"react-font-picker": "1.1.8",
"react-immutable-proptypes": "2.1.0",
"react-mapbox-gl": "^1.3.3",
"react-moment": "0.2.2",
"react-redux": "5.0.3",
"react-router": "3.0.2",
"react-router-redux": "4.0.8",
"react-sortable-hoc": "0.5.0",
"react-tap-event-plugin": "2.0.1",
"redux": "3.6.0",
"redux-api-middleware": "1.0.2",
"redux-auth-wrapper": "1.0.0",
"redux-thunk": "2.2.0",
"reflexbox": "2.2.3",
"reproject": "1.1.1",
"to-css": "1.2.1",
"uuid": "3.0.1"
},
"devDependencies": {
"autoprefixer": "6.7.6",
"babel-cli": "6.23.0",
"babel-core": "6.23.1",
"babel-eslint": "7.1.1",
"babel-loader": "6.3.2",
"babel-plugin-react-display-name": "2.0.0",
"babel-plugin-transform-class-properties": "6.23.0",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-plugin-transform-react-constant-elements": "6.23.0",
"babel-plugin-transform-react-remove-prop-types": "0.3.2",
"babel-plugin-transform-runtime": "6.23.0",
"babel-polyfill": "6.23.0",
"babel-preset-latest": "6.22.0",
"babel-preset-react": "6.23.0",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-1": "6.22.0",
"babel-register": "6.23.0",
"browser-sync": "2.18.8",
"chai": "3.5.0",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"coveralls": "2.11.16",
"cross-env": "3.1.4",
"css-loader": "0.26.2",
"enzyme": "2.7.1",
"eslint": "3.16.1",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-json": "1.2.0",
"eslint-plugin-jsx-a11y": "4.0.0",
"eslint-plugin-react": "6.10.0",
"eslint-watch": "3.0.0",
"extract-text-webpack-plugin": "2.0.0",
"file-loader": "0.10.1",
"html-webpack-plugin": "2.28.0",
"http-proxy-middleware": "0.17.3",
"isparta": "4.0.0",
"json-loader": "0.5.4",
"mocha": "3.2.0",
"mockdate": "2.0.1",
"node-sass": "4.5.0",
"npm-run-all": "4.0.2",
"open": "0.0.5",
"postcss-loader": "1.3.2",
"prompt": "1.0.0",
"proxy-middleware": "0.15.0",
"react-addons-test-utils": "15.4.2",
"redux-immutable-state-invariant": "1.2.4",
"replace": "0.3.0",
"rimraf": "2.6.1",
"sass-loader": "6.0.2",
"sinon": "1.17.7",
"sinon-chai": "2.8.0",
"style-loader": "0.13.2",
"url": "0.11.0",
"url-loader": "0.5.8",
"webpack": "2.2.1",
"webpack-bundle-analyzer": "2.3.0",
"webpack-dev-middleware": "1.10.1",
"webpack-hot-middleware": "2.17.1",
"webpack-md5-hash": "0.0.5"
},
"keywords": [],
"repository": {
"type": "git",
"url": ""
}
}
oliverbienert
All 12 comments
When I change source-map handling from:
devtool: 'source-map'
to
devtool: 'eval'
the error disappears. Can someone shed some light on this? This has probably nothing to do with mapbox-gl, hasn't it?
oliverbienert
on 1 Mar 2017
This has probably nothing to do with mapbox-gl, hasn't it?
I would guess not. Make sure you're following the instructions in GETTING_STARTED.md.
jfirebaugh
on 2 Mar 2017
@oliverbienert did you figure out the issue? I ran into the same thing - very strange. I also changed the devtool/sourcemap, but I changed it to false
stevewillard
on 3 Mar 2017
No, I didn't investigate further, for the moment. Because I use the react-mapbox-gl wrapper, I looked into their code but they seem to do it as described in GETTING_STARTED.md.
So the error went away but I'm still a bit worried about it as I don't know why this happened.
Unfortunately, as I have other things on my plate for now, I will be able to dig deeper in a couple of weeks at the earliest. However, if I find out something I am going to post it here.
oliverbienert
on 3 Mar 2017
Discussion seems to continue here: https://github.com/mapbox/mapbox-gl-js/issues/4359
kachkaev
on 13 Mar 2017
I ran into the same issue, and changing devTool: 'source-map' to eval or false did not initially work with Webpack 2.2.1. Updated it to 2.3.3, and that fixed this. I'm still not sure what the issue is, though.
mark2685
on 5 Apr 2017
This is still happening, why is this issue closed ?
It looks to me like mapbox is written in such way that will not survive minification.
What are those "blobs" mentioned in the error ? Is mapbox trying to load some JS from somewhere that has to match some global variables declared in their scripts ?
surdu
on 30 Jul 2017
PS: Another way to make the error go away and still use sourcemaps is to set the sourceMap options for uglify plugin to true.
{
plugins: [
new webpack.optimize.UglifyJsPlugin({
parallel: true,
sourceMap: true // <<<<
})
],
devtool: 'cheap-source-map' //or whatever
}
Happened to me too. Changing it to:
devtool: 'eval'
fixed it, but I have no idea why, or what the hell this means. Can someone please explain, thanks
fosini
on 7 Aug 2017
Erase that ... My above solution doesn't seem to be working anymore for some reason :(
But, I found a working solution here: https://github.com/mapbox/mapbox-gl-js/issues/4359#issuecomment-286277540
surdu
on 22 Aug 2017
excuse me. i see the 'devtool' to 'eval'. However, the error 'Uncaught ReferenceError: n is not defined' is still not work..why???
asling
on 14 Sep 2017
None of the solutions above worked but I tried another solution in @surdu's link
module: {
...
noParse: /(mapbox-gl)\.js$/
},
MikeKerrBBC
on 26 Oct 2017
Related issues
iamdenny
路
3Comments
aendrew
路
3Comments
aderaaij
路
3Comments
mollymerp
路
3Comments
Scarysize
路
3Comments
Most helpful comment
When I change source-map handling from:
to
the error disappears. Can someone shed some light on this? This has probably nothing to do with mapbox-gl, hasn't it?