react: TypeError during tests with Vitest + Recoil

[theohagos]

@module-federation/[email protected]
[email protected],
[email protected]

When running test the following error is thrown
TypeError: Method Promise.prototype.then called on incompatible receiver [object Module]

[theohagos]

Upgraded to [email protected] but the end result is the same :(

[gioboa]

Hi @theohagos can you create a basic example with that shows this issue please?

[theohagos]

Hello @gioboa, thanks for your response.

The project is internal to JPMorgan, so afraid won't be able to post an exact replica but I have narrowed it down to recoiljs that is causing this error. I am also using nx workspace with rspack module federation to create remote MFEs. These apps also use recoil with vitest and the tests run successfully without this error.

[gioboa]

So the problem is the combination mf/vite + recoiljs + vitest, right?

[theohagos]

Hello @gioboa,

Yes exactly that. Remove recoiljs test passes, add recoiljs back and then test throws above error. But there is no error when running the app, it works, it consumes remotes and no issues there.

Funnily enough I have the opposite problem with originjs/vite-plugin-federation, that is what led me to this plugin. With origin, tests pass but the app fails with this error Cannot read properties of null (reading 'useState'), looks like it is loading multiple version of react.

[gioboa]

looks like it is loading multiple version of react.

You can share react dep to avoid that problem, but idk if you can do it with that plugin

[gioboa]

Have you tried with different Node versions?

[deizianens]

I have the same error when running Vitest + mf/vite

My versions:
[email protected],
[email protected]

I'm not using Recoil. Tested with node versions 16, 18 and 20. All of them outputs the same error message:

I tested using vi.doMock and Error: [vitest] There was an error when mocking a module. If you are using "vi.mock" factory, make sure there are no top level variables inside, since this call is hoisted to top of the file. Read more: https://vitest.dev/api/vi.html#vi-mock message disappears but TypeError: Method Promise.prototype.then called on incompatible receiver [object Module] continues.

[theohagos]

Hi @gioboa,

so it looks like it may not be specific to recoiljs since @deizianens is ALSO facing the same error without using recoiljs?

[gioboa]

Hi @deizianens , can you create a basic example that reproduce the issue please?

[deizianens]

Sure @gioboa
You can reproduce the error TypeError: Method Promise.prototype.then called on incompatible receiver [object Module] with:
https://github.com/deizianens/mfe-vite

When running yarn test the error above is raised:

[mgreca]

It is happening to me too, my tests were working with originjs/vite-plugin-federation and when I replaced it with this library, they started to fail, but I don't use Recoil, only vitest

[saraiba33]

It is happening to me too, my tests were working with originjs/vite-plugin-federation and when I replaced it with this library, they started to fail, but I don't use Recoil, only vitest

When you were using originjs/vite-plugin-federation was there any additional setup or mocking you had to do to get the tests to pass? I have tried both and both seem to have issues with the tests. I'm getting the same error. Unfortunately, it is for my employer, and can not share specifics

[mgreca]

@saraiba33 I haven't changed anything, but what I did to skip this issue was to avoid federation when running tests, just doing the following in vite.config:

 plugins: [
      ...
      mode !== 'test' &&
        federation({
     ...

[gioboa]

I tested the @deizianens example https://github.com/deizianens/mfe-vite
and without federation.shared config the error is gone. I'll investigate more in the next days.

[JamesMHenderson]

I get the same error when I include a Suspense around my component