Cannot read properties of null when using react signals with preact library

[yanai101]

Versions

• vite-plugin-federation: ^1.3.5
• vite: ^5.2.11

Reproduction

create a new vite app - one remote and one host - and configure the MF :

// remote vite config
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [['module:@preact/signals-react-transform']],
      },
    }),
    federation({
        name: 'remoteApp',
        filename: 'remoteEntry.js',
        exposes: {
            './Button': './src/button',
        },
        shared: ['react', 'react-dom'],
    })
  ],

  build: {
    modulePreload: false,
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  }
})

and config the host also:

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [['module:@preact/signals-react-transform']],
      },
    }),
    federation({
      name: 'host-app',
      remotes: {
        remoteApp: "http://localhost:5001/assets/remoteEntry.js",
      },

      shared: ['react', 'react-dom'],
    })
  ],

  build: {
    modulePreload: false,
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  }
})

in the remote - add the @preact/signals-react so it looks like this - that is the module to share :

import { signal } from "@preact/signals-react";

const counter = signal(0);

function Button() {
  return (
    <button className="my-button"onClick={() => counter.value++}>
      my button 123 - {counter?.value}
    </button>
  )
}

export default Button

Steps to reproduce

when you try to load this Button component in the host app - you will get one of these errors: -without shred lib:

TypeError: Cannot read properties of null (reading 'useRef')

-with shred react and react-dom lib you will get this error:

TypeError: Cannot read properties of null (reading 'useSyncExternalStore')
    at react_production_min.useSyncExternalStore (__federation_shared_react-DYlhdcjt.js:34:374) 

What is actually happening?

we got exceptions

[rynrn]

I've got it too :(

[yanai101]

I wonder if this is coues because external libraries that use react hook like - useSyncExternalStore

[mgreca]

@yanai101 I've created a more general bug, because I think the issue is with the useSyncExternalStore hook.