React interactivity problem

[norama]

React interactivity problem

[sasoria]

Thanks for writing an issue on this, @norama 🙌 I'm running Astro in production with React micro-frontends and it works fine with useState. This error is caused by running Astro in dev mode and app-a in production mode. Astro has its own React version in dev mode which is the reason for the error you've mentioned.

If you want to run the apps locally you have to run Astro with npm run preview. Sorry for not being clear on this in the readme, I'll update it as soon as possible!

[sasoria]

Another approach would be to allow different versions of react running in the shell, though I have not tried it with useState. Here's an example on how to do it with injection points for the micro-frontends.

[norama]

Thanks a lot for the quick answer and update!
It is working with npm run preview just in this case there is no hot module reload and other nice dev mode stuff...
How do you use dev mode?
Or just use dev mode for the microfrontends in isolation and using prod mode always when running astro with the microfrontends together?

[norama]

Another approach would be to allow different versions of react running in the shell, though I have not tried it with useState. Here's an example on how to do it with injection points for the micro-frontends.

Thanks, this is working with npm run dev!!!

[sasoria]

Awesome. I usually develop each app in isolation in dev mode. In each micro-frontend you can add a page layout in index.css and import it in main.tsx. This won't get bundled to production because the entry point is Microfrontend.tsx

For the Astro app, you can mock the micro-frontend bundles in a local server and run it in dev mode.

[sasoria]

Closing this issue, I'm planning on adding more documentation in the future!