Next.js: Uncaught ReferenceError: dll is not defined

[Jero786]

Bug report

The error Uncaught ReferenceError: dll_xxxxxx is not defined it happens a soon as you create a empty project and open it. Please take a look the following demo project.

It does only happening in Chrome! in FF it's works fine.

MacOs Sierra: 10.13.6
Chrome Version: 70.0.3538.102
Node: v10.10.0
NPM: v6.4.1

• Package dependencies:

 "@zeit/next-sass": "^1.0.2-canary.0",
    "babel-polyfill": "^6.26.0",
    "classnames": "^2.2.6",
    "cross-fetch": "^2.2.2",
    "express": "^4.16.4",
    "fs": "0.0.1-security",
    "immutable": "^3.8.2",
    "lodash": "^4.17.10",
    "next": "^7.0.2-canary.21",
    "next-redux-wrapper": "^2.0.0",
    "node-sass": "4.9.4",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-notification-system": "^0.2.17",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-devtools-extension": "^2.13.5",
    "redux-immutable": "^4.0.0",
    "redux-thunk": "^2.3.0"

my dev dependencies:

"devDependencies": {
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^8.2.6",
    "babel-jest": "22.4.3",
    "babel-plugin-module-resolver": "^3.1.1",
    "chai": "^4.1.2",
    "enzyme": "3.2.0",
    "enzyme-adapter-react-16": "1.5.0",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.10.0",
    "husky": "^0.14.3",
    "jest": "22.0.1",
    "lint-staged": "^7.3.0",
    "prettier-eslint": "^8.8.2",
    "react-addons-test-utils": "15.6.2",
    "react-test-renderer": "16.2.0",
    "sinon": "^6.1.5",
    "superagent": "^4.0.0-beta.5",
    "supertest": "^3.3.0"
  }

Expected behavior

Should not show any message error.

Screenshots

Additional context

This bug was closed but it's still there and I change the name of the bug in order to be more searchable.

[timneutkens]

Please provide a full reproduction. I still can't reproduce.

[PrimarchAlpharius]

Can confirm the bug, reverting to v7.0.1 solves the problem for me

[timneutkens]

Please provide a full reproduction. I still can't reproduce.

I keep repeating myself in these issues 😢

It's really hard to look into or fix anything without a full reproduction of this issue.

[Jero786]

@timneutkens if you just clone the project that I sent, and write npm install && npm run and then open a Chrome it does happen. Again for me only in chrome. (Version 70.0.3538.102 (Official Build) (64-bit)) also I try to update the browser to version Version 70.0.3538.110 (Official Build) (64-bit) and nothing... just the same. The project it's broken. You don't able to trigger any action, and also dont redirect to anyware. And in FF, the route path '/' keep loading forever. I'm very sad for this bug, I don't know what more to try. I'm using NextJS for a production application and after this bug that I faced since 2 weeks ago, I don't know I will need to move on to other vanilla Webpack+react+redux project. :(

[Jero786]

Can confirm the bug, reverting to v7.0.1 solves the problem for me

@PrimarchAlpharius for me it doesn't work :(

[timneutkens]

Just tried the repo, which is a Next.js app with one page, meaning it's the equivalent of our test suites, and had no issue at all. I'm on chrome 70.0.3538.102.

[davscro]

We are experiencing the same issue. Will try to figure out what's happening there.

[davscro]

...also while I am getting above error in chrome console in the same time I see in node console

TypeError: Cannot read property 'finished' of undefined
    at HotReloader._callee2$ (/node_modules/next/dist/server/hot-reloader.js:276:34)
    at tryCatch (/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:114:21)
    at asyncGeneratorStep (/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:5:24)
    at _next (/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:27:9)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:182:7)

I am not sure whether this one is connected 🤔

[Jero786]

I read out there a workaround that seems like fix this problem, could you try guys if that works for you as well?

just add in their .eslintrc

...
"rules": {
...
        "no-console": 1,
...
}
...

[djhi]

I reproduced this issue when trying to install both [email protected] and @material-ui/[email protected] which has a peer dependency on [email protected]. When removing @material-ui/[email protected], the issue disappeared so I suspected there were multiple versions of react conflicting.

Adding a resolution key in my package.json for react and react-dom targetting the version I want solved the issue

[timneutkens]

So the issue could be react being shipped with a dependency you install 🤔

[davidcraig]

I am also getting this error today on a fresh NextJS build - it only happens on localhost (does not happen once the project is deployed) - I am developing on a Windows machine at the minute, perhaps issue is an edge case with webpack on windows node?

Console warning is present in firefox and chrome.

external "dll_513dd14659e539e0c36c":1 Uncaught ReferenceError: dll_513dd14659e539e0c36c is not defined
    at Object.dll-reference dll_513dd14659e539e0c36c (external "dll_513dd14659e539e0c36c":1)
    at __webpack_require__ (bootstrap:788)
    at fn (bootstrap:149)
    at Object../node_modules/react/index.js?79ad (index.js from dll-reference dll_513dd14659e539e0c36c:1)
    at __webpack_require__ (bootstrap:788)
    at fn (bootstrap:149)
    at Object../node_modules/next/dist/client/index.js (index.js:35)
    at __webpack_require__ (bootstrap:788)
    at fn (bootstrap:149)
    at Object../node_modules/next/dist/client/next-dev.js (next-dev.js:23)
dll-reference dll_513dd14659e539e0c36c @ external "dll_513dd14659e539e0c36c":1
__webpack_require__ @ bootstrap:788
fn @ bootstrap:149
./node_modules/react/index.js?79ad @ index.js from dll-reference dll_513dd14659e539e0c36c:1
__webpack_require__ @ bootstrap:788
fn @ bootstrap:149
./node_modules/next/dist/client/index.js @ index.js:35
__webpack_require__ @ bootstrap:788
fn @ bootstrap:149
./node_modules/next/dist/client/next-dev.js @ next-dev.js:23
__webpack_require__ @ bootstrap:788
fn @ bootstrap:149
0 @ module.js:22
__webpack_require__ @ bootstrap:788
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js?ts=1552845440736:1

Package.json deps

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.15",
    "@fortawesome/free-solid-svg-icons": "^5.7.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@zeit/next-sass": "^1.0.1",
    "bulma": "^0.7.4",
    "next": "^8.0.3",
    "node-sass": "^4.11.0",
    "react": "^16.8.4",
    "react-dom": "^16.8.4"
  },

[matiascaputti]

Same happening to me, still not fixed on latests versions.

[roelvan]

Just had the same error on "next": "^8.0.4".

[vamshikilari]

Same issue! Did anyone find a solution?

[aguilarm]

Not sure 100% how to repro what I just did to get this error to show up, but stopping my next dev process and re-installing my node dependencies before restarting next resolved for me. Seems like it could be related to not having certain dependencies next needs at runtime, or yanking them out with npm uninstall or yarn remove while next is still running the dev/webpack process.

I had it happen as a result of a pretty large refactor and haven't been able to repro it however. I imagine most of ya'll could fix this by rm -rf ./node_modules && npm install if I'm correct here. Could explain why @davidcraig's case breaks only locally.

[scottie-schneider]

Same error with Next.JS Build. @aguilarm 's solution worked, I npm install'd again, restarted server.

[juliosilvacwb]

I stopped my server, running 'npm install' and restart the server, after it the problem disappear.

[kabyanil]

I am running nextjs with express as backend. My nextjs runs on localhost:3000 and express runs on localhost:3001. Often times when I change my code, the page doesn't refresh. When I manually refresh, it shows the 404 not found page and Uncaught ReferenceError: dll is not defined in the console. I have to manually run npm run dev and refresh. This is time-consuming. It would be great if somebody shares a solution.

[tshazli]

I get this issue but on windows OS AND when the project folder is in a deep path. In essence, I think the issue is related to accessing webpack cache files with long path (longer than 260 chars) which fails the process accessing it.

Try moving your project folder to a shorter path and see if you get this issue so you can verify my theory.

[konsumer]

It was not at all clear to me, from the error message, but in my case I had multiple next apps running in a parent now app, and the issues was assetPrefix needs to point to the subdir's location. I tried clearing out things and re-running npm i, both at the top-level and in subdirs and it had issues. I ended up finding #257 and solved my problem in the sub-app's next.config.js:

module.exports = {
  assetPrefix: '/store/'
}

[IAmNatch]

In my case, I stopped my server, rm -rf node_modules, npm install, and restarted my server. All was back to normal.

I believe it was caused when I "npm installed" while running the dev server, as mentioned above.

[lucasgerard]

I'm having the same issue on version 9.4, and @aguilarm solution to rm -rf node_modules & yarn install did not work for me.

[comxd]

@lucasgerard Use &&, not single &.

If cleaning the _node_modules_ not working and you work at localhost:3000 on multiple projects, you need to clear your browser cache/application cache/services workers.

A simple way to full clear all caches for a domain/website (Chrome dev tools):

[matiascaputti]

I fixed the problem by forcing service workers to update the site, as they were caching files generating the dll is not defined error.

if ('serviceWorker' in navigator) {
   window.addEventListener('load', function() {
       navigator.serviceWorker.getRegistrations().then(registrations => {
           for(let registration of registrations) {
               registration.unregister().then(bool => {console.log('unregister: ', bool);});
               }
               window.location.reload();
       });
   });
 }

Another approach could be -as @comxd said- unregistering service workers from your browser with the Unregister service workers to force them update cached files.

[DaveKnifeman]

@comxd Clearing the browser data worked for me! Thanks!

[lazlojuly]

I had a similar issue in local development and running rm -rf .next/cache has resolved it.

[timneutkens]

Can you try latest Next.js, the dll plugin was removed

[KeitelDOG]

I just experienced it, while setting up Material UI & Co, did not have to delete my Browser Data for localhost

On Chrome Browser:

1. Open "Dev Tools"
2. Select the "Network" tab
3. Check the "Disable Cache"

This will force refresh all the page assets and it should work

[uqurtosun]

Don't use : npm start
Do use : npm run dev