Failed to fetch dynamically imported module when trying to access a remote app from the host using the NX workspace, yarn, React, and Vite

[AdHiadithyan2]

Failed to fetch dynamically imported module when trying to access a remote app from the host using the NX workspace, yarn, React, and Vite

Failed to fetch dynamically imported module: http://localhost:3001/node_modules/.vite/packages/twenty-front/deps/react.js?v=206b7b18

When using React-based hooks, I'm getting the error if not using then its works fine

Versions

• vite-plugin-federation: 1.4.0
• vite: 6.2.5

Reproduction

https://github.com/twentyhq/twenty use this git

Additional Details

**Working**
import React, { useEffect } from 'react';

const Button: React.FC = () => {

return (
<button
style={{ padding: '10px', fontSize: '16px' }}
onClick={() => console.log('Button clicked23')}
>
I'm Remote!

);
};




Not Working


import React, { useEffect } from 'react';

const Button: React.FC = () => {
useEffect(() => {
console.log('Button mounted');
}, []);

return (
<button
style={{ padding: '10px', fontSize: '16px' }}
onClick={() => console.log('Button clicked23')}
>
I'm Remote!

);
};

Steps to reproduce

https://github.com/twentyhq/twenty use this git
create a remote-app and try to import in app
getting error when trying to use react hooks

What is Expected?

need to render react hook and all other packages

What is actually happening?

not able to use react based hooks
getting error
Failed to fetch dynamically imported module: http://localhost:3001/node_modules/.vite/packages/twenty-front/deps/react.js?v=206b7b18