TypeError: (0, react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__jsxDEV) is not a function

[leondavidtb]

Describe the bug

We are working on a project using Microfrontends architecture using the module federation plugin for nextjs v8.1.1 and we have 4 MFEs created: A, B, C and D. Of these 4 MFEs, we use MFE A to assemble the other MFEs. To run the project locally we need to download all the repositories and run them individually and point to their local address. For example: MFE-A-URL=http://localhost:3000 MFE-B-URL=http://localhost:3001 MFE-C-URL=http://localhost:3002 MFE-D-URL=http://localhost:3003

This will be a problem when we have other MFEs as it will become unfeasible to run multiple MFEs locally. Our idea is to run just the MFE-A that mounts all the other MFEs locally and point the other MFEs to their remote URLs, for example: MFE-A-URL=http://localhost:3000 MFE-B-URL=https://example.com/mfe-b MFE-C-URL=https://example.com/mfe-c MFE-D-URL=https://example.com/mfe-d

This is working correctly when pointing two MFEs, but when pointing the third it is giving the error shown in the image.

Reproduction

N/A

Used Package Manager

yarn

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1265U
    Memory: 2.75 GB / 15.69 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (122.0.2365.80)
    Internet Explorer: 11.0.22621.1

Validations

• [X] Read the docs.
• [X] Read the common issues list.
• [X] Check that there isn't already an issue 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 of the bug.

[ScriptedAlchemy]

What's your host look like? Or the pages / files you're importing. Can you send screenshot

[leondavidtb]

We're using a <DynamicComponent /> in the [[...url]].tsx, thats contain some functions and one of these function is responsible for render the MFE. We are passing the type of the component, i.e., 'header': and then render it like this:

[ScriptedAlchemy]

Use react lazy not dynamic.

[leondavidtb]

This is a attempt using dynamic to test, with lazy the same problem still remains.

[ScriptedAlchemy]

Try adding a get initial props or something to document or a page and see if it works

[leondavidtb]

Yes, we already use getInitialProps in _document.tsx.

[ScriptedAlchemy]

Send me a github repo