wrong React in remote subdependencies (require(react))

[husayt]

I am not sure if this is issue with this library, vite or runtime module federation. But It works with webpack module federation.

So basically react in vite remote app works fine, react components render normally. But when I try to use Ag-grid-react I get infamous Invalid hook call. error.

    at Object.useRef (chunk-EFTEWGEA.js:1074:29)
    at AgGridReactUi (ag-grid-react.js:13873:36)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)

Seems the issue with right version react obtained via require inside ag-grid-react (CJS library):

    var react_1 = __importStar(require_react());

@zhangHongEn you just fixed an issue for dynamic imports, maybe we also need fix for require

[zhangHongEn]

@husayt Good issue, I will fix it at noon

[husayt]

Also similar error when I use MUI (Material UI)

TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (chunk-EFTEWGEA.js:1062:29)
    at useTheme (chunk-JKYVMHHX.js:3290:32)
    at useTheme2 (chunk-JKYVMHHX.js:3298:10)
    at useThemeProps (chunk-JKYVMHHX.js:3839:15)
    at useThemeProps2 (chunk-JKYVMHHX.js:6377:10)
    at Paper2 (@mui_material.js:1304:17)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateForwardRef (react-dom.development.js:19226:20)
    at beginWork (react-dom.development.js:21636:16)
    at beginWork$1 (react-dom.development.js:27426:14)

[husayt]

@husayt Good issue, I will fix it at noon

I have other issues too, but this is the biggest and most serious issue affecting anyone who would try do any realistic use with 3rd party libraries.

[zhangHongEn]

@husayt Good issue, I will fix it at noon

I have other issues too, but this is the biggest and most serious issue affecting anyone who would try do any realistic use with 3rd party libraries.

Yes, this is a very important bug, but I didn't have time to look at it until 7 hours later.

[husayt]

Yes, this is a very important bug, but I didn't have time to look at it until 7 hours later.

that is fine, i posted some other issues as well. I just wanted to say that this one is the most pressing one among them.

[gioboa]

@zhangHongEn you are doing great, take your time to avoid burnouts 🚀

[zhangHongEn]

Vite pre-built subdependencies cannot be proxied in the usual way. I have found a solution, but I have been too busy recently and may need to wait for two days.

[zhangHongEn]

zhangHongEn@06dc35d
All that remains is to make this step automatic.

[husayt]

I made a simple repro to test this case. Will try to commit that later. But gist of it I added another remote with
with these dependencies

  "dependencies": {
    "@module-federation/vite": "workspace:*",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vue": "^3.4.29",
    "vue-router": "^4.4.0",
    "ag-grid-community": "^30.2.0",
    "ag-grid-react": "^30.2.0"
  },

and AgGridDemo.jsx

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import { AgGridReact } from 'ag-grid-react';
import { useState } from 'react';


export const AgGridDemo = ({  }) => {
  const [rowData] = useState([
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
  ]);

  const [columnDefs] = useState([{ field: 'make' }, { field: 'model' }, { field: 'price' }]);

  return (
    <div className="App">
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <div
          id="grid1"
          className="ag-theme-alpine"
          style={{ height: 400, width: 600, margin: '20px' }}
        >
          <AgGridReact rowData={rowData} columnDefs={columnDefs}></AgGridReact>
        </div>
        <div
          id="grid2"
          className="ag-theme-alpine"
          style={{ height: 400, width: 600, margin: '20px' }}
        >
          <AgGridReact rowData={rowData} columnDefs={columnDefs}></AgGridReact>
        </div>
      </div>
    </div>
  );
};

When running this remote on its own all works fine.

But when I try to run it from another host via MF I get the same error

Object.useRef (chunk-D5PPDA7K.js:1074:29)
    at AgGridReactUi (ag-grid-react.js:69725:36)
    at renderWithHooks (chunk-BISVECJP.js:11548:26)
    at mountIndeterminateComponent (chunk-BISVECJP.js:14926:21)
    at beginWork (chunk-BISVECJP.js:15914:22)
    at HTMLUnknownElement.callCallback2 (chunk-BISVECJP.js:3674:22)
    at Object.invokeGuardedCallbackDev (chunk-BISVECJP.js:3699:24)
    at invokeGuardedCallback (chunk-BISVECJP.js:3733:39)
    at beginWork$1 (chunk-BISVECJP.js:19765:15)
    at performUnitOfWork (chunk-BISVECJP.js:19198:20)

[husayt]

zhangHongEn@06dc35d All that remains is to make this step automatic.

This looks very promising. Tried to test the proposed solution on the example above. Seems I am missing something, so I have to wait for proper solution. Very excited to finally get this working. Thank you

[zhangHongEn]

@husayt Finally finished, the sub-dependency is running well now, thank you for finding this problem, I will test it again and issue a PR tomorrow night

zhangHongEn@d79fe18

[zhangHongEn]

compeleted

[husayt]

Thank you @zhangHongEn, but now it is completely broken for me. I tried to run latest examples and I get "Please call init first" error on both host and remote examples.

Seems it is the same issue as this: #42 (comment)

When i try "remoteEntry.js" I get this

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVtcHR5LmpzP19fbWZfX3dyYXBSZW1vdGVFbnRyeV9fIl0sInNvdXJjZXNDb250ZW50IjpbIiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=