[BUG] Module federation breaks in typescript when trying to import react

[josejulio]

Describe the bug

I get the following error when loading the page, nothing else loads:

Uncaught (in promise) Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react
    at Object.__webpack_modules__.<computed> (consumes:137)
    at __webpack_require__ (bootstrap:21)
    at fn (hot module replacement:61)
    at Module../src/bootstrap-dev.js (App.js:43)
    at __webpack_require__ (bootstrap:21)
    at fn (hot module replacement:61)
    at entry-dev.tsx:21

To Reproduce

I created a reproducer from the frontend-starter-app

Steps to reproduce the behavior:

1. Clone frontend-app-starter
2. Install typescript
3. Rename entry-dev.js to entry-dev.tsx and add a tsconfig file
4. Start and open in browser
5. See error in console

Or instead of steps 1-4 use this commit: RedHatInsights/frontend-starter-app@92ea132

Expected behavior
It should work show the starter application

Desktop (please complete the following information):

• OS: Fedora
• Browser Chrome
• Version Version 87.0.4280.66 (Official Build) (64-bit)

Additional context
There should be some step for the ts/tsx files that is missing in the config. Any hint on what to look would be appreciated.

[josejulio]

Looks like having the entry files as js does the trick.

entry-dev.js

import('./bootstrap-dev');

bootstrap-dev is a typescript file.

I'll keep testing and will close this issue if everything seems fine.

[rajsenthil]

I got struck for many days until I saw this message. Thanks.

[josejulio]

Glad that it was useful. I ran into other issues (resolved by now), so let me know and I might be able to help.

[chrispcode]

Hey guys, I was able to solve this by using this typescript configuration:

{
  "include": ["src/**/*"],
  "compilerOptions": {                   
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
  }
}

module to esnext and moduleResolution to node is what I think did the trick!

[chrispcode]

and yes, my bootstrap file is called: bootstrap.tsx
and here is my request sequence: