Missing assets from loadable-stats.json

[Noah-Vivial]

🐛 Bug Report

We are receiving the following error when generating HTML via our server-side-rendering process.

  const nodeStats = path.join(process.cwd(), 'build/node/loadable-stats.json')
  const webStats = path.join(process.cwd(), 'build/loadable-stats.json')

  const nodeExtractor = new ChunkExtractor({
    statsFile: nodeStats, outputPath: path.resolve(process.cwd(), 'build/node')
  })
  const { default: App, React, renderToString } = nodeExtractor.requireEntrypoint()
  const webExtractor = new ChunkExtractor({
    statsFile: webStats, outputPath: path.resolve(process.cwd(), 'build/web')
  })

Here's the error:

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at validateString (internal/validators.js:112:11)
    at Object.extname (path.js:1231:5)
    at getFileScriptType (/Users/noah/work/lib/node_modules/@loadable/server/lib/ChunkExtractor.js:49:60)
    at isScriptFile (/Users/noah/work/lib/node_modules/@loadable/server/lib/ChunkExtractor.js:53:10)
    at /Users/noah/work/lib/node_modules/@loadable/server/lib/ChunkExtractor.js:366:11

It appears that the cause is related to the way the assets within the loadable-stats.json block is generated.

Here's the loadable-stats.json using 5.15

{
  "hash": "aeebda487075c80e6709",
  "publicPath": "/",
  "outputPath": "/Users/nmarkon/work/content-site-connect2local/build/node",
  "assetsByChunkName": {
   ...snip..
  },
  "assets": [
    {
      "type": "assets by status",
      "cached": true,
      "filteredChildren": 70,
      "size": 281927
    }
  ],

In 5.14.2 the assets block in contained information regarding each chunk such as:

{
  "hash": "4ee6a975c8dd4cdbc020",
  "version": "5.37.0",
  "time": null,
  "publicPath": "/",
  "outputPath": "/Users/noah/work/lib/build/node",
  "assetsByChunkName": {
   .... snip....
  },
  "assets": [
    {
      "type": "asset",
      "name": "static/js/name-goes-here.d2b992cb.chunk.js",
      "size": 3518,
      "emitted": false,
      "comparedForEmit": false,
      "cached": true,
      "info": {
        "immutable": true,
        "contenthash": "d2b992cb",
        "javascriptModule": false,
        "minimized": true
      },
      "chunkNames": [
        "name-goes-here"
      ],
      "chunkIdHints": [],
      "auxiliaryChunkNames": [],
      "auxiliaryChunkIdHints": [],
      "related": {},
      "chunks": [
        4677
      ],
      "auxiliaryChunks": [],
      "isOverSizeLimit": false
    },
...snip... 

It looks like this change is the root cause:
9ad6bf5

It appears that the all: false is preventing the cached assets from being added. If cachedAssets: true is added to the JSON then the cached assets are added as expected.

[open-collective-bot]

Hey @Noah-Vivial 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use Loadable at work, you can also ask your company to sponsor us ❤️.

[theKashey]

👍 , I am not sure what are cached assets, but if you found a way to fix this problem - let's fix it.

[depoulo]

I'm having the same issue. However, removing all: false grows the stats file a lot when using Webpack 5 (from 180 kB to 108 MB in my case), so I can understand why it was added. Could we maybe expose all options to the user facing API?

My use case, for example, works just fine with the currently set options when I replace all: false with

moduleAssets: false,
dependentModules: false,
children: false,
chunkModules: false,
entrypoints: false,
orphanModules: false,
modules: false,
providedExports: false,
relatedAssets: false,

I could also provide a pull request if I get a "go" from a maintainer.

[theKashey]

Let's add a few safeguards and expectations for this.
Probably it was not the best idea to implement those changes without corresponding tests.

[depoulo]

Update to my above suggestion

I misunderstood @Noah-Vivial: he does not want to remove all: false, but merely add cachedAssets: true, which:

• is perfectly reasonable in terms of output file size, and
• fixes my issue as well.

So #778 is probably overkill, feel free to close it might still serve other use cases. I've created #779 instead, and also published an according git tag to be used with npm / yarn: depoulo/loadable-components#@loadable/webpack-plugin/cached-assets-770/5.15.1.