search

automerge / automerge-classic

A JSON-like data structure (a CRDT) that can be modified concurrently by different users, and merged again automatically.
http://automerge.org/
MIT License
14.77k stars 467 forks source link

Integration module federation with ReactJS #522

Closed fernandoiwamoto closed 1 year ago

fernandoiwamoto commented 1 year ago

I don't know if the issue is Module Federation or Automerge 2.0, but when I declare the Automerge.init() in the mf project, the root project breaks the application but the mf project doesn't:

react-dom.development.js:28439 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

By removing the the Automerge.init(), the root project and mf works fine.

Important! Using 1.0.1-preview.7 works fine.

Sample app with 2.0 test-app.zip

alexjg commented 1 year ago

It looks like this app was created with create-react-app, which has some issues using webassembly. If you take a look at the "create react app" tab of https://automerge.org/docs/quickstart/ you can see one way to fix this, alternatively take a look at the javascript/examples/create-react-app demo at https://github.com/automerge/automerge-rs/tree/main/javascript/examples/create-react-app (note, not in this repo).

fernandoiwamoto commented 1 year ago

I made it work using CRA as described in the docs. But the issue is when I try to use Module Federation, using the 1.0.1-preview.7 works fine... while the 2.0 break it.

alexjg commented 1 year ago

Have you tried using webpack directly rather than create-react-app? In my experience create-react-app is extremely buggy when it comes to webassembly bundling.

fernandoiwamoto commented 1 year ago

yes, the sample app (folder create-project-mf) is using automerge + webpack (not CRA), but when integrating with MF, it breaks, and using older version of automerge works fine.

alexjg commented 1 year ago

Unfortunately I have no experience with webpack module federation. If I had to guess I would say this is probably something to do with the interaction between webpack experimental webassembly module support and whatever module federation is, but I can't offer you much help there - you'll probably need to dig into it a bit yourself. Maybe try reproducing this with a minimal webassembly dependency to check if it's automerge specific or just a general problem with webassembly dependencies?

fernandoiwamoto commented 1 year ago

I found the issue, there are two things that fixed using Automerge as Module Federation. React.lazy and Suspense