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 ReferenceError: n is not defined #4348

Closed
oliverbienert opened this issue Mar 1, 2017 · 12 comments
Closed

Uncaught ReferenceError: n is not defined #4348

oliverbienert opened this issue Mar 1, 2017 · 12 comments

Comments

@oliverbienert
Copy link

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
Copy link
Author

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
Copy link
Contributor

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
Copy link

@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
Copy link
Author

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
Copy link

Discussion seems to continue here: #4359

@mark2685
Copy link

mark2685 commented Apr 4, 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.

@surdu
Copy link

surdu commented Jul 30, 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
Copy link

surdu commented Jul 30, 2017 •
edited
Loading

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
Copy link

fosini commented Aug 7, 2017 •
edited
Loading

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
Copy link

surdu commented Aug 22, 2017 •
edited
Loading

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
Copy link

asling commented Sep 14, 2017

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

@MikeKerrBBC
Copy link

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

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

@ChiefORZ ChiefORZ mentioned this issue Oct 3, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@stevewillard @jfirebaugh @mark2685 @kachkaev @asling @oliverbienert @surdu @fosini @MikeKerrBBC