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) {
code: 'ERR_INVALID_ARG_TYPE'
}
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:
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 https://www.dropbox.com/s/9r947cgg4qvqbu4/loadable-test.zip?dl=0
Run
yarn
yarn dev:server
# go to localhost:3000 and see the error in console
to rebuild:
yarn
yarn dev:build-client
yarn dev:build-server
yarn dev:server # go to localhost:3000
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
1 Asked on December 30, 2021 by var_the_an
1 Asked on December 30, 2021 by aquamad96
0 Asked on December 30, 2021 by swayamjeet-swain
2 Asked on December 30, 2021 by andy-williams
3 Asked on December 30, 2021 by callum-brown
3 Asked on December 30, 2021 by sshaikh
2 Asked on December 30, 2021 by user11035198
4 Asked on December 30, 2021 by user11247496
3 Asked on December 30, 2021
2 Asked on December 30, 2021 by yponde
1 Asked on December 30, 2021 by saksh
1 Asked on December 30, 2021 by abhay
9 Asked on December 30, 2021 by brandon-cornelio
2 Asked on December 30, 2021
3 Asked on December 30, 2021 by kim-stacks
Get help from others!
Recent Answers
Recent Questions
© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir