ReferenceError: __webpack_require__ is not defined

Destiner · October 21, 2019, 3:41pm

Recently, all builds of the sites that I have on Netlify seem to render an error during runtime. The build process itself seems to be ok, but when I try to open the deployed site all I see is a white screen and “ReferenceError: __webpack_require__ is not defined” in dev console.

My average project is a single-page Vue application. As I said, it happens to all of my projects that I deployed recently. I created a dummy Vue project (deployed) which does not work for me.

My deployment consists of Webpack and serving out of dist folder.

Few things that make this error frustrating:

I can’t reproduce this error when building a site locally.
I don’t remember changing anything on my side. One day a casual deployment just started to fail during runtime.
Old deployments / projects are unaffected.
I couldn’t reproduce on my phone. I also tried various “website checkers” which also work fine. Additionally, based on the thumbnail in the dashboard I can see that Netlify itself also doesn’t have any problems rendering my sites.

I kinda realize that this sounds like a problem on my side, but the fact that I didn’t change anything + old deployments work fine + local deployments work fine makes me wonder if there’s something. Specifically, what’s the difference between Netlify bundles vs mine that one is ok and another one is failing.

luke · October 14, 2019, 7:34am

Hi, @Destiner. I took a look at the demo site and for the build scripts I see only this (in package.json):

  "scripts": {
    "serve": "DEV=true webpack-dev-server"
  },

Do you have a build command which creates a static file version of the site?

You cannot run a server at Netlify so I’m not sure how to test this repo with our service. Netlify is for static/JAMStack sites and no browse time application server is available.

Destiner · October 15, 2019, 8:42am

Indeed @luke. I set my build command as “webpack” in the dashboard (and “dist” as public directory).

Here is an example of deploy log:

11:43:12 PM: Build ready to start
11:43:19 PM: build-image version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
11:43:19 PM: build-image tag: v3.3.2
11:43:19 PM: buildbot version: a7218d16207abc9d322bc8b7167243e6971856c3
11:43:19 PM: Fetching cached dependencies
11:43:19 PM: Starting to download cache of 98.2MB
11:43:20 PM: Finished downloading cache in 821.789927ms
11:43:20 PM: Starting to extract cache
11:43:24 PM: Finished extracting cache in 3.86719979s
11:43:24 PM: Finished fetching cache in 4.754910761s
11:43:24 PM: Starting to prepare the repo for build
11:43:24 PM: Preparing Git Reference refs/heads/master
11:43:25 PM: Found netlify.toml. Overriding site configuration
11:43:25 PM: Starting build script
11:43:25 PM: Installing dependencies
11:43:25 PM: Started restoring cached node version
11:43:28 PM: Finished restoring cached node version
11:43:28 PM: v10.16.3 is already installed.
11:43:30 PM: Now using node v10.16.3 (npm v6.9.0)
11:43:30 PM: Attempting ruby version 2.6.2, read from environment
11:43:31 PM: Using ruby version 2.6.2
11:43:32 PM: Using PHP version 5.6
11:43:32 PM: Started restoring cached node modules
11:43:32 PM: Finished restoring cached node modules
11:43:32 PM: Started restoring cached go cache
11:43:32 PM: Finished restoring cached go cache
11:43:32 PM: unset GOOS;
11:43:32 PM: unset GOARCH;
11:43:32 PM: export GOROOT=’/opt/buildhome/.gimme/versions/go1.12.linux.amd64’;
11:43:32 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
11:43:32 PM: go version >&2;
11:43:32 PM: export GIMME_ENV=’/opt/buildhome/.gimme/env/go1.12.linux.amd64.env’;
11:43:32 PM: go version go1.12 linux/amd64
11:43:32 PM: Installing missing commands
11:43:32 PM: Verify run directory
11:43:32 PM: Executing user command: webpack
11:43:37 PM: Hash: aa644ff5114a82d306b5
11:43:37 PM: Version: webpack 4.41.0
11:43:37 PM: Time: 3229ms
11:43:37 PM: Built at: 09/27/2019 8:43:37 PM
11:43:37 PM: Asset Size Chunks Chunk Names
11:43:37 PM: index.html 430 bytes [emitted]
11:43:37 PM: main.96d54f014122f706495e.js 67.3 KiB 0 [emitted] [immutable] main
11:43:37 PM: public/assets/btceth2575.svg 1.88 KiB [emitted]
11:43:37 PM: public/assets/btceth5050.svg 3.68 KiB [emitted]
11:43:37 PM: public/assets/btceth7525.svg 2.36 KiB [emitted]
11:43:37 PM: public/assets/btcvol.svg 2.18 KiB [emitted]
11:43:37 PM: public/assets/eth12emaco.svg 3.19 KiB [emitted]
11:43:37 PM: public/assets/eth20smaco.svg 3.4 KiB [emitted]
11:43:37 PM: public/assets/eth26emaco.svg 2.47 KiB [emitted]
11:43:37 PM: public/assets/eth50smaco.svg 3.51 KiB [emitted]
11:43:37 PM: public/assets/ethvol.svg 2.04 KiB [emitted]
11:43:37 PM: vendors.92412eefc6ef6821db14.js 317 KiB 1 [emitted] [immutable] [big] vendors
11:43:37 PM: Entrypoint main [big] = vendors.92412eefc6ef6821db14.js main.96d54f014122f706495e.js
11:43:37 PM: [3] ./public/assets/ethvol.svg 70 bytes {0} [built]
11:43:37 PM: [4] ./public/assets/btcvol.svg 70 bytes {0} [built]
11:43:37 PM: [7] ./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./public/App.vue?vue&type=style&index=0&lang=css& 1.49 KiB {0} [built]
11:43:37 PM: [8] ./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./public/views/Main.vue?vue&type=style&index=0&id=0a28f4a2&scoped=true&lang=css& 1.59 KiB {0} [built]
11:43:37 PM: [9] ./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./public/views/Set.vue?vue&type=style&index=0&id=4c9e61ee&scoped=true&lang=css& 1.59 KiB {0} [built]
11:43:37 PM: [10] ./public/assets/eth20smaco.svg 74 bytes {0} [built]
11:43:37 PM: [11] ./public/assets/eth50smaco.svg 74 bytes {0} [built]
11:43:37 PM: [12] ./public/assets/eth12emaco.svg 74 bytes {0} [built]
11:43:37 PM: [13] ./public/assets/eth26emaco.svg 74 bytes {0} [built]
11:43:37 PM: Starting post processing
11:43:37 PM: [14] ./public/assets/btceth5050.svg 74 bytes {0} [built]
11:43:37 PM: [19] (webpack)/buildin/global.js 472 bytes {1} [built]
11:43:37 PM: [21] ./public/App.vue?vue&type=style&index=0&lang=css& 534 bytes {0} [built]
11:43:37 PM: [28] ./public/views/Main.vue?vue&type=style&index=0&id=0a28f4a2&scoped=true&lang=css& 608 bytes {0} [built]
11:43:37 PM: [30] ./public/views/Set.vue?vue&type=style&index=0&id=4c9e61ee&scoped=true&lang=css& 606 bytes {0} [built]
11:43:37 PM: [32] ./public/main.js + 13 modules 48.9 KiB {0} [built]
11:43:37 PM: | ./public/main.js 486 bytes [built]
11:43:37 PM: Post processing done
11:43:37 PM: | ./public/App.vue 1020 bytes [built]
11:43:37 PM: | ./public/views/Main.vue 1.15 KiB [built]
11:43:37 PM: | ./public/views/Set.vue 1.14 KiB [built]
11:43:37 PM: | ./public/App.vue?vue&type=template&id=40d8a7e9& 195 bytes [built]
11:43:37 PM: | ./public/views/Main.vue?vue&type=template&id=0a28f4a2&scoped=true& 214 bytes [built]
11:43:37 PM: | ./public/views/Main.vue?vue&type=script&lang=js& 362 bytes [built]
11:43:37 PM: | ./public/views/Set.vue?vue&type=template&id=4c9e61ee&scoped=true& 213 bytes [built]
11:43:37 PM: | ./public/views/Set.vue?vue&type=script&lang=js& 360 bytes [built]
11:43:37 PM: | ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./public/App.vue?vue&type=template&id=40d8a7e9& 309 bytes [built]
11:43:37 PM: | ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./public/views/Main.vue?vue&type=template&id=0a28f4a2&scoped=true& 2.79 KiB [built]
11:43:37 PM: | ./node_modules/babel-loader/lib??ref–0!./node_modules/vue-loader/lib??vue-loader-options!./public/views/Main.vue?vue&type=script&lang=js& 12.1 KiB [built]
11:43:37 PM: | ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./public/views/Set.vue?vue&type=template&id=4c9e61ee&scoped=true& 9.04 KiB [built]
11:43:37 PM: | ./node_modules/babel-loader/lib??ref–0!./node_modules/vue-loader/lib??vue-loader-options!./public/views/Set.vue?vue&type=script&lang=js& 19.4 KiB [built]
11:43:37 PM: + 18 hidden modules
11:43:37 PM: WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
11:43:37 PM: This can impact web performance.
11:43:37 PM: Assets:
11:43:37 PM: vendors.92412eefc6ef6821db14.js (317 KiB)
11:43:37 PM: WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
11:43:38 PM: Site is live
11:43:37 PM: Entrypoints:
11:43:37 PM: main (384 KiB)
11:43:37 PM: vendors.92412eefc6ef6821db14.js
11:43:37 PM: main.96d54f014122f706495e.js
11:43:37 PM: WARNING in webpack performance recommendations:
11:43:37 PM: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
11:43:37 PM: For more info visit https://webpack.js.org/guides/code-splitting/
11:43:37 PM: Child html-webpack-plugin for “index.html”:
11:43:37 PM: 1 asset
11:43:37 PM: Entrypoint undefined = index.html
11:43:37 PM: [0] ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html 485 bytes {0} [built]
11:43:37 PM: [2] (webpack)/buildin/global.js 472 bytes {0} [built]
11:43:37 PM: [3] (webpack)/buildin/module.js 497 bytes {0} [built]
11:43:37 PM: + 1 hidden module
11:43:37 PM: Skipping functions preparation step: no functions directory set
11:43:37 PM: Caching artifacts
11:43:37 PM: Started saving node modules
11:43:37 PM: Finished saving node modules
11:43:37 PM: Started saving pip cache
11:43:37 PM: Finished saving pip cache
11:43:37 PM: Started saving emacs cask dependencies
11:43:37 PM: Finished saving emacs cask dependencies
11:43:37 PM: Started saving maven dependencies
11:43:37 PM: Finished saving maven dependencies
11:43:37 PM: Started saving boot dependencies
11:43:37 PM: Finished saving boot dependencies
11:43:37 PM: Started saving go dependencies
11:43:37 PM: Finished saving go dependencies
11:43:37 PM: Build script success
11:43:37 PM: Starting to deploy site from ‘dist’
11:43:37 PM: Creating deploy tree
11:43:37 PM: 0 new files to upload
11:43:37 PM: 0 new functions to upload
11:43:55 PM: Finished processing build request in 35.820245698s

Btw I can give access to one of the sites if that helps.

sd-design · October 16, 2019, 5:23am

@Destiner
tl:dr; uBlock origin Chrome Ext seems to be the cause for me

<<<
I had the same problem, restarted a project from a few months ago and also couldn’t remember having this issue. Spent hours trying things, I thought it might have to do with setting the NODE_ENV in Webpack config bc something changed on Netlify… like this

but then I noticed if I load the site in an Incognito window I don’t have the error. Narrowed it down to the uBlock origin Chrome Extension. I don’t know why it messes this up - if this is something I can prevent in some way in my code/project/Netlify settings.

Do you happen to have extensions that might be blocking scripts ?

I’m not sure this is a reasonable fix, but then again uOrigin does warn pple about breaking sites.
curious if there’s a way to break gracefully

sd-design · October 16, 2019, 5:26am

ps. If this is the issue, I’d be curious to figure out why only new projects are affected. That signals something on Netlify’s side… and I also don’t remember having this issue previously [while using uBlock origin]

luke · October 16, 2019, 6:22am

@Destiner, I don’t see the dev console error for this site:

https://webpack-fix.netlify.com/

If you try loading this site in a different browser does the error still occur for you? What steps are required to see the dev console error?

sd-design · October 16, 2019, 7:23am

just tried it. if you install uBlockOrigin you’ll see the error

luke · October 16, 2019, 8:35am

@sd-design, then the error is caused by the uBlockOrigin browser add-on and not by Netlify. Please address this issue with the creator of the add-on.

Destiner · October 16, 2019, 8:51am

Oh wow. Seems like uBlock is the cause for me too. I was confused b/c all browsers were affected but that’s due to the fact that all of them had uBlock installed.

@sd-design did you have that problem only with the new deployments or all of them? Also, are there sites of yours that are unaffected?

Don’t know how to fix that yet, but definitely have some food for further research now. I know some “Netlify”-based sites (with build step) that are working fine. Also, wonder whether it’s an issue with uBlock or some particular list.

sd-design · October 17, 2019, 2:29am

@Destiner I only have one site I’m working on, not live yet, still in development/testing.
Old deployments for it worked with Chrome + uBlock…

Good point about the list … I dunno.
I’m gonna move on to other dev things for now, let me know if you find anything…

joseph-allen · October 21, 2019, 10:46am

you are a hero pal this was driving me mad