Next.js: Cannot read property 'call' of undefined - random error after the build

Created on 12 Sep 2018 · 15Comments · Source: vercel/next.js

Bug report

This error happens not often without any way to reproduce consistently.

After running npm run build && NODE_ENV=production node server.js when opening the application I am getting this error TypeError: Cannot read property 'call' of undefined in webpackJsonp(). I did some debugging of compiled code. It turns out that it was trying to import a module and could not do so. After adding a specific check to skip that module, the error repeated for a different module.

The error gets thrown here:

        try {
            e[t].call(r.exports, r, r.exports, o), // here
            a = !1
        } finally {
            a && delete n[t]
        }
        return r.l = !0,
        r.exports

Describe the bug

It it not browser cache (opened from different browsers by different users). The interesting thing is that it looks like the wrong version of compiled javascript is used.

As you can see below, the latest built version is main-1b3ae3c3b465f531f82f.js.

On the other hand, in the server response the used version is main-a2c606020b72eb845382.js.

To be sure it is not Varnish interfering:

curl localhost:3000 | grep a2c606020b72eb845382 | wc -l # result is 2
curl localhost:3000 | grep 1b3ae3c3b465f531f82f | wc -l # result is 0

To Reproduce

I can not consistently reproduce this. It happens not often.

There's nothing special/exotic in babel config and nextjs config.

// .babelrc.js
module.exports = {
  presets: ['next/babel'],
  plugins: [
    ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ],
    "inline-react-svg"
  ]
};

// next.config.js
const withSass = require('@zeit/next-sass');

module.exports = withSass({
  webpack(config) {
    config.module.rules.push({
      test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
        },
      },
    });
    return config;
  },
});

Expected behavior

No error.

This is not just somethign dumping to console. The app crashes.

System information

OS: Ubuntu
Version of Next.js: 6.1.1.

Source

strrife

👍1

Most helpful comment

@timneutkens @janustoth @chitogamer96 This problem is already there, I don't know why it's close this ISSUE, could be re-open it? or do you prefer to crate a new one?.

I did not able to fix that so far, somebody was able to find at least a workaround? It make me block to work, or make it so hard to keep working, I'm really worried about this.

screen shot 2018-11-15 at 10 09 06 am

OS: MacOS 10.13.6
node: 10.10.0
npm: 6.4.1

"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",
    "immutable": "^3.8.2",
    "lodash": "^4.17.10",
    "next": "^7.0.2-canary.21",
    "next-redux-wrapper": "^2.0.0",
    "node-sass": "^4.9.2",
    "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"
  },

"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.1.1",
    "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"
  }

Jero786 on 15 Nov 2018

👍19

All 15 comments

Should be fixed on next@canary, you'll also need @zeit/next-css@canary:

yarn add next@canary @zeit/next-css@canary

timneutkens on 12 Sep 2018

👍2 😕1

Thank you for your response, I will upgrade nextjs to canary tonight.

strrife on 13 Sep 2018

how to add @zeit/next-css@canary to

const withSass = require('@zeit/next-sass');

module.exports = withSass({
webpack(config) {
config.module.rules.push({
test: /.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
},
},
});
return config;
},
}); ?

I can´t fix :( Help me please

chitogamer96 on 17 Sep 2018

Should be fixed on next@canary, you'll also need @zeit/next-css@canary:

yarn add next@canary @zeit/next-css@canary

Hi @timneutkens . This did not solve the issue - for me at least. The issues appeared after upgrading to next 7.0 and it appears quite often though not consistently. The issue goes away when refreshing the screen.

janustoth on 27 Sep 2018

👍6

same problem with next 7.0.1

vanmik on 12 Oct 2018

👍5

@timneutkens @janustoth @chitogamer96 This problem is already there, I don't know why it's close this ISSUE, could be re-open it? or do you prefer to crate a new one?.

I did not able to fix that so far, somebody was able to find at least a workaround? It make me block to work, or make it so hard to keep working, I'm really worried about this.

screen shot 2018-11-15 at 10 09 06 am

OS: MacOS 10.13.6
node: 10.10.0
npm: 6.4.1

"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",
    "immutable": "^3.8.2",
    "lodash": "^4.17.10",
    "next": "^7.0.2-canary.21",
    "next-redux-wrapper": "^2.0.0",
    "node-sass": "^4.9.2",
    "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"
  },

"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.1.1",
    "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"
  }

Jero786 on 15 Nov 2018

👍19

I'm close to 100% sure that if you see this issue it's related to https://github.com/zeit/next-plugins/issues/282.

timneutkens on 15 Nov 2018

👎1 👍1

@timneutkens I did all the steps and workarounds mentioned in the following link, and the error it's still there. I don't know what more to try.. somethimes it's fixed a short period of time doing: npm cache clean --force && rm -fr node_modules && npm install && npm run build && npm run dev (but not always it's resolved, mainly the error still persist. Also the error it's wors in Chrome. In FF, sometimes seems like it's work fine, and then chash again. Also in FF, the main path '/' it does not work, but the sub paths, for instance, '/home' works fine, but again only in FF, not in Chrome.)

Jero786 on 19 Nov 2018

👍2

Here's another possible workaround: https://github.com/zeit/next-plugins/issues/282#issuecomment-450578740

icflorescu on 30 Dec 2018

I just want to chime in and say that the issue is still present in v7.0.3

EDIT: Upgrading to the canary build or using v8, which released a few days ago, seems to have fixed the issue.

patientplatypus on 12 Feb 2019

👍9 😄1

same to me, importing css on _app.js file doesn't fix the problem

andrescabana86 on 21 Feb 2019

👍1

@timneutkens @janustoth @chitogamer96 This problem is already there, I don't know why it's close this ISSUE, could be re-open it? or do you prefer to crate a new one?.

I did not able to fix that so far, somebody was able to find at least a workaround? It make me block to work, or make it so hard to keep working, I'm really worried about this.

screen shot 2018-11-15 at 10 09 06 am

OS: MacOS 10.13.6
node: 10.10.0
npm: 6.4.1

"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",
    "immutable": "^3.8.2",
    "lodash": "^4.17.10",
    "next": "^7.0.2-canary.21",
    "next-redux-wrapper": "^2.0.0",
    "node-sass": "^4.9.2",
    "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"
  },

"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.1.1",
    "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"
  }

n _app.js
import "bootstrap/dist/css/bootstrap.min.css";

and package.json
'dependencies': { "@zeit/next-css": "^1.0.1", "@zeit/next-sass": "^1.0.1", "bootstrap": "^4.3.1", "express": "^4.17.1", "isomorphic-unfetch": "^3.0.0", "next": "^9.0.3-canary.6", "next-fonts": "^0.17.0", "node-sass": "^4.12.0", "react": "^16.8.6", "react-bootstrap": "^1.0.0-beta.8", "react-dom": "^16.8.6", "react-redux": "^7.1.0", "redux": "^4.0.1", "redux-devtools-extension": "^2.13.8", "redux-thunk": "^2.3.0", "styled-components": "^4.3.2" }
It worked in my case now

salil0001 on 4 Aug 2019

👍2

This is still an issue in 9. The moduleId that I see during this error is "./node_modules/next/dist/client/dev/noop.js"
Need help with a solution for this issue, the above are not working for me.

JeromeJoestar on 5 Aug 2019

👍13

This issue is still there.

"dependencies": { "@zeit/next-css": "^0.2.1-canary.4", "@zeit/next-sass": "^1.0.1", "acorn": "^6.2.0", "axios": "^0.18.0", "body-parser": "^1.19.0", "classnames": "^2.2.6", "cookie-session": "^1.3.3", "dotenv": "^8.0.0", "draft-js": "^0.10.5", "draftjs-to-html": "^0.8.4", "express": "^4.16.4", "html-to-draftjs": "^1.4.0", "http-proxy": "^1.17.0", "immutable": "^4.0.0-rc.12", "lodash": "^4.17.14", "lru-cache": "^5.1.1", "moment": "^2.24.0", "mongoose": "^5.6.4", "morgan-body": "^2.4.8", "next": "^9.0.7-canary.10", "next-compose": "0.0.2", "next-manifest": "^1.6.0", "next-redux-saga": "^3.0.0", "next-redux-wrapper": "^2.1.0", "next-routes": "^1.4.2", "node-sass": "^4.11.0", "nprogress": "^0.2.0", "passport": "^0.4.0", "passport-google-oauth20": "^2.0.0", "prop-types": "^15.6.2", "quill": "^1.3.6", "react": "^16.8.6", "react-breadcrumbs-dynamic": "^1.2.0", "react-confirm-alert": "^2.4.1", "react-dom": "^16.8.6", "react-draft-wysiwyg": "^1.13.2", "react-json-editor-ajrm": "^2.5.9", "react-redux": "^6.0.0", "react-redux-toastr": "^7.5.1", "react-rte": "^0.16.1", "react-toggle-button": "^2.2.0", "redux": "^4.0.4", "redux-actions": "^2.6.4", "redux-devtools-extension": "^2.13.7", "redux-form": "^8.1.0", "redux-mock-store": "^1.5.3", "redux-saga": "^0.16.0", "revalidate": "^1.2.0", "sitemap": "^3.2.2", "stream": "0.0.2", "webpack-spritesmith": "^1.0.1" },