@loadable/server pass the whole stats JSON to eval('require')(modulePath)

Stack Overflow Asked on January 3, 2022

I’m trying to setup SSR for react app with @loadable/components. I setup all based on docs with babel and webpack plugins. When I try to run node server.js it runs ok but when I open a browser and throws the following error (into node console):

TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received an instance of Object
    at validateString (internal/validators.js:118:11)
    at Module.require (internal/modules/cjs/loader.js:1033:3)
    at require (internal/modules/cjs/helpers.js:72:18)
    at smartRequire (/Users/max/Documents/repos/app/node_modules/@loadable/server/lib/util.js:44:25)
    at new ChunkExtractor (/Users/max/Documents/repos/app/node_modules/@loadable/server/lib/ChunkExtractor.js:181:50)
    at renderer (webpack://app/./node_modules/@MYSCOPE/elm/dist/elm.esm.js?:3619:19)
    at eval (webpack://app/./src/server.tsx?:64:90)
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {

As you can see there is @MYSCOPE in the traceback which holds some of my internal packages (if it matters).

@loadable/server/lib/util.js is the following function:

enter image description here

And when I try to console.log(modulePath) on line 42 I see a whole stats JSON output which seems wrong and I should get a single module path (as I understand).

Any help?

I can share some specific parts of my configuration files if needed. Because I see my own package in console output seems like something is wrong with it’s build (it works perfectly on the client-side with cjs build), but having full stats object as module path is very confusing.

UPD: Demo


yarn dev:server
# go to localhost:3000 and see the error in console

to rebuild:

yarn dev:build-client
yarn dev:build-server
yarn dev:server # go to localhost:3000

One Answer

The statsFile option passed to ChunkExtractor expects a path to the loadable-stats.json file, not the actual JSON content of it. By doing require('../loadable-stats.json'), webpack actually resolve the JSON during build time and assign it to the loadableJson variable.

You can change your loadableJson as follow:

import path from 'path';

const loadableJson = path.resolve(__dirname, '../bundle_client/loadable-stats.json');

This will solve the problem you had on your question. But, if you only do this, you will notice that you have another problem. Loadable by default assumes that your entry chunk name is main. This is not the case in your demo, as you have set the entry chunk name to be app instead.

entry: {
    app: ['@babel/polyfill', './src/index.tsx']

To solve this, simply tell loadable about your entrypoints names by passing an array to the ChunkExtractor contructor as such:

    const extractor = new ChunkExtractor({
        statsFile: loadableJson,
        entrypoints: ["app"], // name of your entry chunk

That's it, everything should now be working properly!

If it helps, I set up the demo on GitHub so you can easily see the changes I made here.

Answered by Jackyef on January 3, 2022

Add your own answers!

Related Questions

bootstrap collapsible div disable

1  Asked on December 11, 2021 by kumara


Is there any way to access an internal Node.js module?

1  Asked on December 11, 2021 by vilicvane


Issues with matplotlib

1  Asked on December 11, 2021 by giancarlo-betti


Import a list of string from another file in flutter

1  Asked on December 11, 2021 by wytex-system


Gradle Issue when trying to add local library

1  Asked on December 11, 2021 by ilovesomething23


Django Formset Initialization in POST and GET

0  Asked on December 11, 2021 by aannaa


Penalty for Non-State-Changing Texture Rebinding in OpenGL

0  Asked on December 11, 2021 by pprovins


MongoDB aggregate Query from mongodb university course

0  Asked on December 11, 2021 by 1005hoon


Classes and interfaces in Angular 9

1  Asked on December 11, 2021 by harry_c


Android Studio. App crashes after thread sleeps

1  Asked on December 9, 2021 by lfc-productions


Ask a Question

Get help from others!

© 2023 All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP