I'm currently facing an issue when using @rive-app/react-canvas in a ReactJS Module Federation setup (Webpack as host and Vite as remote)

[NamVinh]

Hi, I'm encountering a problem when trying to use @rive-app/react-canvas in a micro-frontend architecture where the host application is built with Webpack and the remote module is built with Vite. Here's a brief overview of my setup:

Webpack (Host) – webpack.config.js:

new ModuleFederationPlugin({
  name: "webpackHost",
  filename: "remoteEntry.js",
  remotes: {
    "@herond-point": "promise import("http://localhost:3001/assets/remoteEntry.js")",
  },
  shared: {
    react: {
      eager: true,
      import: "react",
      shareKey: "react",
      shareScope: "default",
      singleton: true,
    },
    "react-dom": {
      eager: true,
      import: "react-dom",
      shareKey: "react-dom",
      shareScope: "default",
      singleton: true,
    },
  },
})

Vite (Remote) – vite.config.ts:

 optimizeDeps: {
  include: ['@radix-ui/react-primitive', '@radix-ui/themes', 'react-redux', '@reduxjs/toolkit'],
},
build: {
  modulePreload: false,
  target: 'esnext',
  minify: false,
  cssCodeSplit: false,
  rollupOptions: {
    output: {
      minifyInternalExports: false,
      assetFileNames: (assetInfo) => {
        const ext = assetInfo.name?.split('.').pop();
        if (ext === 'svg') {
          return 'assets/icons/[name]-[hash][extname]';
        }
        return 'assets/[name]-[hash][extname]';
      },
    },
  },
},

publicDir: 'dist',

plugins: [
  react({ plugins: [['@swc/plugin-styled-components', {}]] }),
  macros(),
  svgr(),
  tsconfigPaths(),
  federation({
    name: '@herond-point',
    filename: 'remoteEntry.js',
    exposes: {
      './app': './src/AppRemote.tsx',
    },
    shared: {
      react: { requiredVersion: dependencies['react'] },
      'react-dom': { requiredVersion: dependencies['react-dom'] },
    },
  }),
]

Error Details:

When loading a remote component that uses @rive-app/react-canvas, I receive the following runtime error in the browser console:

herond_point.bundle.js:2 
TypeError: Cannot read properties of null (reading 'useState')
    at react_production_min.useState (index-B1oEREHO.js:262:21)
    at Object.O [as useRive] (index-BQu3j2DS.js:7128:16)
    at MysteryPotReward (index-BQu3j2DS.js:7265:19)
    at gi (herond_point.bundle.js:2:128737)
    at ws (herond_point.bundle.js:2:187678)
    at vu (herond_point.bundle.js:2:176930)
    at _u (herond_point.bundle.js:2:176858)
    at gu (herond_point.bundle.js:2:176721)
    at su (herond_point.bundle.js:2:173883)
    at jo (herond_point.bundle.js:2:115113)