Nuxt.js: nuxt build generates a hidden file under .nuxt/dist/client/commons/

[cainaf]

Versions

• nuxt: 2.13.3
• node: 13.14.0
• @nuxt/typescript-build: 1.0.3
• @nuxt/typescript-runtime: 0.4.10

The problem

A hidden chunk-file is generated when running nuxt-ts build. This is the full path of the file generated for me:

• /.nuxt/dist/client/commons/.a9cf80a.js

The problem is that this hidden file is later inaccessible by the http server and thus this chunk returns 404 in a built application.

After some digging, I found in the docs that chunk names are preceded by an id as follows:

• [id].[contenthash].js

My first thought was that probably this id was coming out as zero (0) and being omitted in a number conversion or something like that (still don't know if that is the case though). But I managed to solve the problem with a workaround and the result also indicates the same cause.

Reproduction

I've done many builds, but this is the first time it happened. So I don't know exactly the cause. But the result was this file:

All other chunks are normally accessed and this is the only one that came out that way, as a hidden file. So when trying to access it via http:

Just for testing purposes, I renamed it without the dot, and it was then accessible:

So when building the app and deploying to my servers, only this chunk was inaccessible and breaking some behavior of the application.

My Solution

Digging in the docs, I found out that I could change built filename patterns. I did that by prefixing a letter c to the chunkId:

The result was the following files. None came as a hidden file and one came with a id=0:

That solved my problem. No hidden files were generated and the application was able to access all built chunks. The zero id may itself also indicate this could be the cause of the problem.

[japboy]

Same thing happens to me with;

• nuxt: 2.13.3
• node: 12.18.1
• @nuxt/typescript-build: 1.0.3
• @nuxt/typescript-runtime: 0.4.10

And @cainaf's solution also saved me;

Digging in the docs, I found out that I could change built filename patterns. I did that by prefixing a letter c

Thank you.

[maikueo]

Same problem here.
I have page components that use asyncData, and have some normal components that use the new fetch hook functionality from 2.12.

This problem only affects the pages that have components with the new fetch hook for me.

thank you @cainaf , the chunk workaround works nicely!

[danielroe]

Should be fixed by https://github.com/nuxt/nuxt.js/pull/7667

[vaiil]

I have same problem on version 2.13.3 (2.13.2 works fine). Changing filename pattern resolves that problem, but there is another one: that file includes a lot of shared components that shouldn't be loaded together.
Try to explain:
I use different components for mobile and desktop (I import them as async components using @nuxtjs/device to detect version), but these components could have same logic, that is extracted to a common file.
For example, we have HomePage and AboutPage.
Home page imports asynchronously ComponentAMobile or ComponentADesktop, each of them import synchronously ComponentACommonLogic.js
About page imports asynchronously ComponentBMobile or ComponentBDesktop, each of them import synchronously ComponentBCommonLogic.js

And in this case ComponentACommonLogic and ComponentBCommonLogic will be placed in that hidden file. But home page doesn't need ComponentBCommonLogic.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.