Uncaught ReferenceError: n is not defined

[oliverbienert]

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]

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?

[jfirebaugh]

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.

[stevewillard]

@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

[oliverbienert]

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.

[kachkaev]

Discussion seems to continue here: #4359

[mark2685]

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.

[surdu]

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]

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
}

[fosini]

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

[surdu]

Erase that ... My above solution doesn't seem to be working anymore for some reason :(

But, I found a working solution here: #4359 (comment)

[asling]

excuse me. i see the 'devtool' to 'eval'. However, the error 'Uncaught ReferenceError: n is not defined' is still not work..why???

[MikeKerrBBC]

None of the solutions above worked but I tried another solution in @surdu's link

  module: {
    ...
    noParse: /(mapbox-gl)\.js$/
  },