Nuxt.js: TypeError: Cannot read property 'call' of undefined

[simllll]

I have a kind of critical bug with "modern" build mode (not in dev, not in non modern mode).

TypeError: Cannot read property 'call' of undefined
at r (3a431c40f1ac84aab470-app.js:formatted:41)
at Object.693 (5e2083c4.js:1)
at r (3a431c40f1ac84aab470-app.js:formatted:41)
at Object.853 (0d43857a.js:1)
at r (3a431c40f1ac84aab470-app.js:formatted:41)
at Object.607 (288dc8e0.js:1)
at r (3a431c40f1ac84aab470-app.js:formatted:41)
at Module.1003 (index.js:1)
at r (3a431c40f1ac84aab470-app.js:formatted:41)
at async http:/localhost.at:3000/website/_assets/70df557e5c5f4faf5bbc-app.js:2

it seems it loads the legacly build version at one point,
at Object.693 (5e2083c4.js:1)
which is: _assets/legacy-3aa82e6f50e494e1c6cd-node_modules/5e2083c4.js
and then it tries to load a file that actually exists, but somehow didn't make it into the webpack "resolver".

e[d] (d = 9)

is here, but probably due to the legacy vs modern mixup something fails then.

here element 9 is missing

Versions

• nuxt: v2.14.1
• node: v12.18.3

Reproduction

Pretty hard to track down right now

What is Expected?

shouldn't fail with modern mode, it only happens when build mode modern is set.

What is actually happening?

it fails to load a javascript file and the whole site stops working.

[simllll]

Not sure if relevant, but if I inspect the array of "e", there are mainly "modern" assets, but "693" (the point where it loasd the legacy file) is pointing to the legacy version. Are there any valid reasons that a legacy version is loaded? E.g. if there is no difference between a modern build?

[simllll]

It breaks here:
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/classCallCheck.js
var classCallCheck = __webpack_require__(9);

and the really werid thing: only on desktop version, not on mobile. Super strange, how can this be related at all? (Guess maybe somethign isn't loaded on mobile which causes the issue, but not quite sure yet)

[pi0]

Hi. Asset names seem not matching 2.14. Are you using custom Chunk names? And any reproduce repo || URL?

[simllll]

hi @pi0, thanks for looking into it,
I have set custom filenames, but i removed this settings for now to track it down, doesn't change anything.
My setting was

    this.options.build.filenames = {
        ...this.options.build.filenames,
        app: ({ isModern, isDev }) =>
            `${!isModern ? 'legacy-' : ''}${!isDev ? '[contenthash]' : '[name]'}-app.js`,
        chunk: ({ isModern, isDev }) =>
            `${!isModern ? 'legacy-' : ''}${!isDev ? '[contenthash]-' : ''}[name].js`
    };

Debug build is up and runnign at http://3d45e0f594df.ngrok.io/jobs

Current learnings:

• It works in mobile mode -> no idea why
• It can load something else from bubel/runtime, right before, but the classCallCheck.js fails
  
• Its loaded through a date fn helper function, which I don't understand why it actually needs this one dependency at all (And therefore believe it already loads a wrong file?)

[simllll]

Regarding my last point:
according to the comments in the file it should load

// EXTERNAL MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCISOWeek/index.js
var startOfUTCISOWeek = __webpack_require__(693);

but 693 is something else, it loads a compnent called HokSelect.vue instead (and the legacy build / non modern version of it).

    /***/
    693: /***/
    (function(module, __webpack_exports__, __webpack_require__) {

        "use strict";

        // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/@hokify/shared-components/lib/components/HokSelect.vue?vue&type=template&id=4fc308f6&scoped=true&
        var render = function() {
            var _vm = this;

seems like some kind of id / name collision?

[simllll]

I'm stuck, my guess is that something seems to be mixed up with modern and legacy build. But I'm out of ideas how to track this down.

It should load id 693 from /website/_assets/node_modules/288dc8e0.f27f277.modern.js (the same file where the call of __webpack_require__(693) is happening, but it loads 693 instead from /website/_assets/node_modules/5e2083c4.4f8e4af.js which is a completely differnt code.

The chunks seem to be mixed up. Module 693 is not in installedModules. The __webpack_require__ is the one from the "root", but the entry of 693 just points to a different function it seems.

[pi0]

/cc @clarkdo

[simllll]

I have one import to a component that is some times async and sometimes directly imported. I have changed it now that all occurences are imported async, and it seems this has somehow solved the issue. Still looking into it, not sure what is going on here though.

[clarkdo]

Hi @simllll , are you using ssr or spa mode? And what’s the modern mode are you using?

Can you send us the manifest files in your dist and also screenshot of the link and script tags in your broken page ?

[simllll]

Hi @clarkdo , thanks for your answer.

I'm using SSR, modern is set to "client".

manifest files:
dist.zip

desktop:

<script nomodule src="/website/_assets/runtime.fa009b9.js" defer></script><script type="module" src="/website/_assets/runtime.3f02afd.modern.js" defer></script><script nomodule src="/website/_assets/40.c765e0f.js" defer></script><script type="module" src="/website/_assets/37.c2155fc.modern.js" defer></script><script nomodule src="/website/_assets/129.1dd27da.js" defer></script><script type="module" src="/website/_assets/126.7f1e543.modern.js" defer></script><script nomodule src="/website/_assets/30.86aeb8b.js" defer></script><script type="module" src="/website/_assets/288.16f3f35.modern.js" defer></script><script nomodule src="/website/_assets/130.be13865.js" defer></script><script type="module" src="/website/_assets/127.75b77f7.modern.js" defer></script><script nomodule src="/website/_assets/pages/jobs/index.f2a9af8.js" defer></script><script type="module" src="/website/_assets/pages/jobs/index.85d3d8e.modern.js" defer></script><script nomodule src="/website/_assets/node_modules/0d43857a.28504fe.js" defer></script><script type="module" src="/website/_assets/node_modules/0d43857a.cf4d41c.modern.js" defer></script><script nomodule src="/website/_assets/node_modules/288dc8e0.929319e.js" defer></script><script type="module" src="/website/_assets/node_modules/288dc8e0.f27f277.modern.js" defer></script><script nomodule src="/website/_assets/commons/62c6da1a.d8fb4f0.js" defer></script><script type="module" src="/website/_assets/commons/62c6da1a.de12725.modern.js" defer></script><script nomodule src="/website/_assets/pages/empty.8499b08.js" defer></script><script type="module" src="/website/_assets/pages/empty.4194d9e.modern.js" defer></script><script src="/website/_assets/node_modules/5e2083c4.4f8e4af.js" defer></script><script nomodule src="/website/_assets/42.bef11fd.js" defer></script><script type="module" src="/website/_assets/39.3b0d27a.modern.js" defer></script><script nomodule src="/website/_assets/278.fd24ac2.js" defer></script><script type="module" src="/website/_assets/274.0e6f0d0.modern.js" defer></script><script nomodule src="/website/_assets/14.9aaf416.js" defer></script><script type="module" src="/website/_assets/137.2902e3c.modern.js" defer></script><script nomodule src="/website/_assets/112.258d4b4.js" defer></script><script type="module" src="/website/_assets/11.cb95906.modern.js" defer></script><script nomodule src="/website/_assets/node_modules/commons.c1101f0.js" defer></script><script type="module" src="/website/_assets/node_modules/commons.b005655.modern.js" defer></script><script nomodule src="/website/_assets/app.2417406.js" defer></script><script type="module" src="/website/_assets/app.fa2606e.modern.js" defer></script>

mobile:

<script nomodule src="/website/_assets/runtime.fa009b9.js" defer></script><script type="module" src="/website/_assets/runtime.3f02afd.modern.js" defer></script><script nomodule src="/website/_assets/40.c765e0f.js" defer></script><script type="module" src="/website/_assets/37.c2155fc.modern.js" defer></script><script nomodule src="/website/_assets/129.1dd27da.js" defer></script><script type="module" src="/website/_assets/126.7f1e543.modern.js" defer></script><script nomodule src="/website/_assets/30.86aeb8b.js" defer></script><script type="module" src="/website/_assets/288.16f3f35.modern.js" defer></script><script nomodule src="/website/_assets/130.be13865.js" defer></script><script type="module" src="/website/_assets/127.75b77f7.modern.js" defer></script><script nomodule src="/website/_assets/pages/jobs/index.f2a9af8.js" defer></script><script type="module" src="/website/_assets/pages/jobs/index.85d3d8e.modern.js" defer></script><script nomodule src="/website/_assets/node_modules/0d43857a.28504fe.js" defer></script><script type="module" src="/website/_assets/node_modules/0d43857a.cf4d41c.modern.js" defer></script><script nomodule src="/website/_assets/node_modules/288dc8e0.929319e.js" defer></script><script type="module" src="/website/_assets/node_modules/288dc8e0.f27f277.modern.js" defer></script><script nomodule src="/website/_assets/commons/62c6da1a.d8fb4f0.js" defer></script><script type="module" src="/website/_assets/commons/62c6da1a.de12725.modern.js" defer></script><script nomodule src="/website/_assets/42.bef11fd.js" defer></script><script type="module" src="/website/_assets/39.3b0d27a.modern.js" defer></script><script nomodule src="/website/_assets/278.fd24ac2.js" defer></script><script type="module" src="/website/_assets/274.0e6f0d0.modern.js" defer></script><script nomodule src="/website/_assets/14.9aaf416.js" defer></script><script type="module" src="/website/_assets/137.2902e3c.modern.js" defer></script><script nomodule src="/website/_assets/112.258d4b4.js" defer></script><script type="module" src="/website/_assets/11.cb95906.modern.js" defer></script><script nomodule src="/website/_assets/node_modules/commons.c1101f0.js" defer></script><script type="module" src="/website/_assets/node_modules/commons.b005655.modern.js" defer></script><script nomodule src="/website/_assets/app.2417406.js" defer></script><script type="module" src="/website/_assets/app.fa2606e.modern.js" defer></script>

[clarkdo]

Thanks for the reporting information, I’ll take a look.

BTW, I suggest using server modern mode for SSR.

[simllll]

Unfortuantely our setup requires client mode, as the web page is pre rendered in a warm cache. We already generating a version for mobile and a version for desktop, adding two more versions for each device ("modern" and "legacy") would need a lot of more ressources to fill and keep the cache fresh

[clarkdo]

Can you please go to node_modules/@nuxt/vue-renderer/, search <script nomodule and add log to print noModuleTag + moduleTag before return ?

[clarkdo]

@simllll I may know the reason of this bug now, 5e2083c4.4f8e4af.js is a special bundle which doesn't have corresponding modern bundle which may be because it's extracted into other common chunks as size is small or some other unknown reason.

Let's confirm my thought, if you can see 5e2083c4.4f8e4af.js in log with my above comment, can you try to change this and try if issue is fixed ?

// From
if (!modernJsFile) {
  return scriptTag
}
// To 
if (!modernJsFile) {
  return scriptTag.replace('<script', `<script nomodule`)
}

[simllll]

Can you please go to node_modules/@nuxt/vue-renderer/, search <script nomodule and add log to print noModuleTag + moduleTag before return ?

noModuleTag + moduleTag 17:50:23
noModuleTag + moduleTag 17:50:23
noModuleTag + moduleTag 17:50:23
noModuleTag + moduleTag 17:50:23
noModuleTag + moduleTag 17:50:23
noModuleTag + moduleTag 17:50:23
noModuleTag + moduleTag 17:50:23
noModuleTag + moduleTag 17:50:23
noModuleTag + moduleTag 17:50:23
noModuleTag + moduleTag 17:50:23
noModuleTag + moduleTag 17:50:23
noModuleTag + moduleTag 17:50:23
noModuleTag + moduleTag 17:50:23
noModuleTag + moduleTag 17:50:23
noModuleTag + moduleTag 17:50:23
noModuleTag + moduleTag 17:50:23
noModuleTag + moduleTag 17:5

[simllll]

Alright, it's not in the output, but I guess that's what you mean, beacuse the return is done before.

I changed the return to your suggestion and IT WORKS!!! :partying_face: :partying_face: :partying_face:
<script nomodule src="/website/_assets/runtime.fa009b9.js" defer></script><script type="module" src="/website/_assets/runtime.3f02afd.modern.js" defer></script><script nomodule src="/website/_assets/40.c765e0f.js" defer></script><script type="module" src="/website/_assets/37.c2155fc.modern.js" defer></script><script nomodule src="/website/_assets/129.1dd27da.js" defer></script><script type="module" src="/website/_assets/126.7f1e543.modern.js" defer></script><script nomodule src="/website/_assets/30.86aeb8b.js" defer></script><script type="module" src="/website/_assets/288.16f3f35.modern.js" defer></script><script nomodule src="/website/_assets/130.be13865.js" defer></script><script type="module" src="/website/_assets/127.75b77f7.modern.js" defer></script><script nomodule src="/website/_assets/pages/jobs/index.f2a9af8.js" defer></script><script type="module" src="/website/_assets/pages/jobs/index.85d3d8e.modern.js" defer></script><script nomodule src="/website/_assets/node_modules/0d43857a.28504fe.js" defer></script><script type="module" src="/website/_assets/node_modules/0d43857a.cf4d41c.modern.js" defer></script><script nomodule src="/website/_assets/node_modules/288dc8e0.929319e.js" defer></script><script type="module" src="/website/_assets/node_modules/288dc8e0.f27f277.modern.js" defer></script><script nomodule src="/website/_assets/commons/62c6da1a.d8fb4f0.js" defer></script><script type="module" src="/website/_assets/commons/62c6da1a.de12725.modern.js" defer></script><script nomodule src="/website/_assets/pages/empty.8499b08.js" defer></script><script type="module" src="/website/_assets/pages/empty.4194d9e.modern.js" defer></script><script nomodule src="/website/_assets/node_modules/5e2083c4.4f8e4af.js" defer></script><script nomodule src="/website/_assets/42.bef11fd.js" defer></script><script type="module" src="/website/_assets/39.3b0d27a.modern.js" defer></script><script nomodule src="/website/_assets/278.fd24ac2.js" defer></script><script type="module" src="/website/_assets/274.0e6f0d0.modern.js" defer></script><script nomodule src="/website/_assets/14.9aaf416.js" defer></script><script type="module" src="/website/_assets/137.2902e3c.modern.js" defer></script><script nomodule src="/website/_assets/112.258d4b4.js" defer></script><script type="module" src="/website/_assets/11.cb95906.modern.js" defer></script><script nomodule src="/website/_assets/node_modules/commons.c1101f0.js" defer></script><script type="module" src="/website/_assets/node_modules/commons.b005655.modern.js" defer></script><script nomodule src="/website/_assets/app.2417406.js" defer></script><script type="module" src="/website/_assets/app.fa2606e.modern.js" defer></script> <-- the nomodule flag is now at 5e2083c4.4f8e4af :+1:

I'm really impressed how fast you tackled this issue!

Thank you very very much!

I will try to patch this for now at my side and see if it still holds in production. But I assume so! Thank you very much again!

[simllll]

Can you elaborate why there are bundles that have a legacy file, but not a modern version? This kinda confuses me.

[clarkdo]

@simllll All thanks to the useful information you provided, I've opened a pr to fix this edge case, it should be released in next patch release after code review.

/cc @pi0

[clarkdo]

Can you elaborate why there are bundles that have a legacy file, but not a modern version? This kinda confuses me.

I think you can have a look at the content of that bundle and search which file is same content in modern bundle, if it's hard to read, you can disable terser and minimizer.

If that chunk is an async component and also imported synchrousely, webpack might bundle it into a common module if component is small in modern bundle and the parent comonent is also using that common module.

[simllll]

Some final comments from my side:
1.) I also applied the patch to my production deployment, it works perfectly!
2.) We had some issues in the past with different kind of includes (async vs direct/sync import mixed in different components), and I just tested reverting one related commit that solved an issue that we couldn't really explain in the past -> it seems this was the same root cause! This also works now as expected! Nice (y)

Thanks again, I'll close this.

Ps.: Seems this issue didn't just pop up, it was there for way longer than I thought: