Federation not working when using framework functions (useState)

[laser-brain]

I've got a problem getting a react project with a simple button using local state to work.
When using the generated code, the following snippet is created in __federation_expose_Button.js

const {r:react} = await importShared('react')

this leads to an error further down the line as react is undefined after this statement.
Changing the code to

const { default: exports } = await importShared('react')
const react = { exports }

fixes the issue.

These are my vite.config.ts files:
Host:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from "@originjs/vite-plugin-federation";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),
    federation({
      name: "router-host",
      filename: "remoteEntry.js",
      remotes: {
        button: {
          external: "http://localhost:5001/assets/remoteButton.js",
          externalType: "url",
          format: "esm",
          from: "vite",
        }
      },
      shared: { react: { eager: true, singleton: true, import: true } },
    })]
})

Remote:

import federation from '@originjs/vite-plugin-federation';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'button',
      filename: 'remoteButton.js',
      exposes: {
        './Button': './src/components/Button.tsx',
      },
      shared: { react: { eager: true, singleton: true, import: true } },
    }),
  ],
});

Is this an issue with the plugin or is my configuration wrong? Thankful for any input on this

[Jiannan-dev]

I'm sorry, this may be a plugin issue, here is some discussion(#173) on the issue, maybe this will help you

[laser-brain]

Thanks for the quick reply and that discussion, that helped me get to the next problem :)
Using react functions like useState now works, but if I try to build a more complex form with some third party component libraries (material-ui), I get errors when I'm using more than the standard components.

Example: This component works fine:

import { Grid, Input, Button, TextField } from '@mui/material';
import { useState } from 'react';
import ProgressOverlay from '../shared/ProgressOverlay';
import './Settings.scss'

const Settings = (): JSX.Element => {
  const [loading, setLoading] = useState(false);

  return (
    <div className="scope__settings-container">
      {loading && <ProgressOverlay fullscreen={false} />}
      <Grid className="container" container spacing={2}>
        <Grid item xs={12}>
          <h1>Account Settings</h1>
        </Grid>
        <Grid item xs={12}>
          <Input value="my-user" />
        </Grid>
        <Grid item xs={12}>
          <Button>Save</Button>
        </Grid>
      </Grid>
    </div>
  );
};

export default Settings;

But as soon as I'm using a <TextField> component instead of the <Input> component (which is basically a wrapper around an input with label and some fancy stuff) the generated code imports a React$1 variable which is undefined and throws an error:

const {default:React,r:react,R:React$1} = await importShared('react')

[...]

const maybeReactUseId = React$1['useId' + '']; // this throws

Other causes for the same error include using the styled-component library instead of local sass styles

Am I configuring something wrong here with nested dependencies?