Missing assets from loadable-stats.json

🐛 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: https://github.com/gregberge/loadable-components/commit/9ad6bf569a28ff553a5adf5104b55c6dcba47016

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.

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

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