Cannot read property 'call' of undefined - random error after the build

[strrife]

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.

[timneutkens]

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

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

[strrife]

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

[chitogamer96]

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

[janustoth]

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.

[vanmik]

same problem with next 7.0.1

[Jero786]

@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.

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"
  }

[timneutkens]

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

[Jero786]

@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.)

[icflorescu]

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

[patientplatypus]

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.

[andrescabana86]

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

[salil0001]

@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.

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

[JeromeJoestar]

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.

[venom90]

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

[federicom-scale]

any updates on this?

[arikanmstf-tw]

why is this marked as closed ? since error is still there.

[raremedia]

I'm encountering a similar client error post build: TypeError: Cannot read property 'call' of undefined at l (webpack-50bee04d1dc61f8adf5b.js:1)

[aroc]

Just encountered this issue myself, running: next: 10.2.0 and webpack: 5.28.0. I upgraded to latest as of today, which is next: 10.2.0 and webpack: 5.36.2 and the error is gone for me.

[timneutkens]

Please open a new issue with a full (complete) reproduction because these comments are not actionable.