client crashes running sample 4

[ranshamay]

hi!
cool repo,
im trying to run sample 4 and have the following issue - loadable-components: failed to synchronously load component, which expected to be available

please advise,
thanks

[brunos3d]

Hello @ranshamay, thanks for the report. This error is already on the radar, I'm working on it with @valorkin to solve it

[expertup]

I have the same problem. I am using webpack version 5.80.0. Any suggestions for error, hints. Maybe I can help with something

/build/server/serverAppEntrypoint.js:297
/******/                __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
                                                     ^

TypeError: __webpack_modules__[moduleId] is not a function
    at __webpack_require__ (/build/server/serverAppEntrypoint.js:297:41)
    at eval (webpack://host/./app/index.js?:6:1)
    at ./app/index.js (/build/server/serverAppEntrypoint.js:19:1)
    at __webpack_require__ (/build/server/serverAppEntrypoint.js:297:41)
    at eval (webpack://host/./server/renderAndExtractContext.js?:13:71)
    at ./server/renderAndExtractContext.js (/build/server/serverAppEntrypoint.js:41:1)
    at __webpack_require__ (/build/server/serverAppEntrypoint.js:297:41)
    at eval (webpack://host/./server/index.js?:8:82)
    at ./server/index.js (/build/server/serverAppEntrypoint.js:30:1)
    at __webpack_require__ (/build/server/serverAppEntrypoint.js:297:41)

Node.js v20.0.0

I added console.log next to errored function, like this:

            console.log(moduleId, typeof __webpack_modules__[moduleId]);
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);

And have another log:

./server/index.js function
path function
express function
@loadable/server function
./server/renderAndExtractContext.js function
react function
react-dom/server function
styled-components function
@mf/loadable-adapters function
./app/index.js function
@loadable/component function
./node_modules/process/browser.js function
./node_modules/console-browserify/index.js function
util function
assert function
[2023-04-24T18:41:51.457Z] App1 is running: 🌎 http://localhost:1234
webpack/container/reference/app2 function
webpack/container/remote/app2/Login_register undefined
loadable-components: failed to synchronously load component, which expected to be available {
  fileName: 'webpack/container/remote/app2/Login_register',
  chunkName: 'app2-Login_register',
  error: '__webpack_modules__[moduleId] is not a function'
}
TypeError: __webpack_modules__[moduleId] is not a function

This look like module federation can't expose remote componnet

Here is repo for reproduction:
https://github.com/expertup/react-mf-loadable-ssr

[brunos3d]

@expertup We had a workaround sample here on how to solve this issue, hope it helps.
Loadable issues is a kinda of thing we plan do deal with and have a definitive solution in the near future.