The loadShareSync function was unable to load react. The react could not be found in federation_provider.

[theaungmyatmoe]

Describe the bug

index.tsx:8 Uncaught Error: 
        The loadShareSync function was unable to load react. The react could not be found in federation_provider.
        Possible reasons for failure: 

        1. The react share was registered with the 'get' attribute, but loadShare was not used beforehand.

        2. The react share was not registered with the 'lib' attribute.

      
    at FederationHost.loadShareSync (index.cjs.js:1262:1)
    at handleInitialConsumes (index.cjs.js:236:1)
    at webpackRequire.m.<computed> (index.cjs.js:245:1)
    at __webpack_require__ (index.tsx:8:1)
    at fn (index.tsx:8:1)
    at react-jsx-dev-runtime.development.js:17:1
    at ./node_modules/react/cjs/react-jsx-dev-runtime.development.js (react-jsx-dev-runtime.development.js:1295:1)
    at __webpack_require__ (index.tsx:8:1)
    at fn (index.tsx:8:1)
    at ./node_modules/react/jsx-dev-runtime.js (jsx-dev-runtime.js:6:1)

Reproduction

https://github.com/amm834/mfe-enhanced-reproduce/blob/main/module-fed/rsbuild.config.ts

Used Package Manager

pnpm

System Info

I use bun and also I just copy past as the doc described.
https://module-federation.io/guide/start/quick-start.html



  System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M2
    Memory: 559.89 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - ~/Library/Application Support/Herd/config/nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.15.5 - ~/Library/pnpm/pnpm
    bun: 1.1.0 - ~/.bun/bin/bun
  Browsers:
    Chrome: 123.0.6312.107
    Safari: 17.2.1

### Validations

- [X] Read the [docs](https://github.com/module-federation/universe).
- [X] Read the [common issues list](https://github.com/module-federation/universe/issues).
- [X] Check that there isn't [already an issue](https://github.com/module-federation/universe/issues) that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Module federation issue and not a framework-specific issue.
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

[zhoushaw]

Let me see.

[zhoushaw]

This is because you did not use the asynchronous entry for module-fed, I will optimize the documentation

[zhoushaw]

This problem is basically caused by not setting up an asynchronous entry, This part of @ScriptedAlchemy will optimize its use so that it does not need to set up an asynchronous entry

[ScriptedAlchemy]

yes this is cause by no async boundary. One can implement the AsyncBoundaryPlugin we have internally.

@zhoushaw - i do think we should consider adding async boundary to the federation plugin directly so by default this issue no longer exists, then user can opt out via option?

Since this is rsbuild, it will take a little more time to port this into rust - im not sure i can access these hooks from JS side. So for rsbuild, use import() in entrypoint

[theaungmyatmoe]

I will try again by adding await and error boundary.

[theaungmyatmoe]

What if it's handled in the internal?

[zhoushaw]

yes this is cause by no async boundary. One can implement the AsyncBoundaryPlugin we have internally.

@zhoushaw - i do think we should consider adding async boundary to the federation plugin directly so by default this issue no longer exists, then user can opt out via option?

Since this is rsbuild, it will take a little more time to port this into rust - im not sure i can access these hooks from JS side. So for rsbuild, use import() in entrypoint

Indeed, we do not yet have support in rspack for situations where asynchronous configuration is not required

[zhoushaw]

What if it's handled in the internal?

I think you can ignore it for the time being and directly configure the asynchronous entry, because we do not yet support rspack without configuring the asynchronous entry, which may require subsequent optimization and enhancement

[theaungmyatmoe]

I am currently using rspack for testing purpose only, later I will migrate to it.
I just solved above issue like so:

await import('./bootstrap')

export {}

But what I am curious is types. I have some issue with types like below:

Any suggestion?

Reproduction
https://github.com/amm834/mfe-enhanced-reproduce

[theaungmyatmoe]

Will there be any additional support for monorepos, given that our micro-frontend will rely on the turbo repo? What I'm curious about regarding monorepos is how the respack module federation remote type generation will handle those cases?

[zhoushaw]

I am currently using rspack for testing purpose only, later I will migrate to it. I just solved above issue like so:

await import('./bootstrap')

export {}

But what I am curious is types. I have some issue with types like below:

Any suggestion?

Reproduction https://github.com/amm834/mfe-enhanced-reproduce

https://module-federation.io/guide/basic/type-prompt.html#consume-type

You need to declare the above where you consume the remote module so that your type is valid

[zhoushaw]

@amm834 In fact, you don't need to care whether it is in monorepo or not, its type generation will work

[ScriptedAlchemy]

Yeah remote type generation should work regardless of repo structure as long as it's configured as mentioned in our docs.

@zhoushaw I'll explore porting async boundary to rust. It's a simple plugin so might not be a big issue