YDoc contents gets removed randomly on refresh

1

So im using the Codemirror 6 demo code in a react component, it works fine but when I refresh the tab several times the contents get removed idk why.
PS: im using y-mongodb-provider to persist the Ydocs in backend

Heres my react code

import React, { useEffect, useState } from "react";
import { yCollab } from "y-codemirror.next";
import { WebsocketProvider } from "y-websocket";
import * as Y from "yjs";

import * as random from "lib0/random";
import { dracula } from "@uiw/codemirror-theme-dracula";

export const usercolors = [
  { color: "#30bced", light: "#30bced33" },
  { color: "#6eeb83", light: "#6eeb8333" },
  { color: "#ffbc42", light: "#ffbc4233" },
  { color: "#ecd444", light: "#ecd44433" },
  { color: "#ee6352", light: "#ee635233" },
  { color: "#9ac2c9", light: "#9ac2c933" },
  { color: "#8acb88", light: "#8acb8833" },
  { color: "#1be7ff", light: "#1be7ff33" },
];
export const userColor = usercolors[random.uint32() % usercolors.length];

const yDoc = new Y.Doc();
function Component() {
  const [provider, setProvider] = useState<WebsocketProvider | null>(null);

  useEffect(() => {
    if (provider) return;
    const _provider = new WebsocketProvider(
      "ws://localhost:3334",
      "testingroom",
      yDoc
    );
    _provider.awareness.setLocalStateField("user", {
      name: "Anonymous " + Math.floor(Math.random() * 100),
      color: userColor.color,
      colorLight: userColor.light,
    });
    setProvider(_provider);
  }, []);

  const yText = yDoc.getText("testing");
  const undoManager = new Y.UndoManager(yText);

  if (!provider) return <p>loading...</p>;
  return (
    <>
      <ReactCodeMirror
        style={{ width: "100%", height: "200px" }}
        theme={dracula}
        extensions={[yCollab(yText, provider.awareness, { undoManager })]}
      />
    </>
  );
}

export default Component;

And here is a gif that shows the problem
ezgif-6-ce88b05829

2

It may be that your backend link is not persistent the Ydoc, causing the websocket connection to be detected after a refresh that triggers the destruction of the Ydoc object

3

hi @SymphonyIceAttack

Thanks for the reply. I forgot to mention in the post that im using the “y-mongodb-provider” at the backend to persist the Ydocs

4

I’m not sure anyone here can help you. It would make more sense to open a bug report the y-mongodb-provider repository.

5

Thanks for the comment @dmonad. Why do you think its related to y-mongodb-provider? :thinking:

Correct me if im wrong but AFAIK the yDoc exists on both server and clients, the y-websocket server was up the whole time. So on each client refresh it should pull the yDoc from the server rather than overwriting it.

I also tried to reproduce this with websocket server with LevelDB persistence with this command and found the same result
HOST=localhost PORT=3334 YPERSISTENCE=./dbDir node ./node_modules/y-websocket/bin/server.cjs

ezgif-2-1e873ba2f6

6

I failed to reproduce your issue with the y-codemirror.next demo.

It is unlikely that y-websocket with leveldb just removes data.

My best guess is that the ReactCodeMirror component overwrites the content with empty content because of a timing issue.

Please try to reproduce the issue yourself with GitHub - yjs/yjs-demos: A collection of demos for Yjs

7

After many attempts I made it work with vite + react. It works perfectly but the issue still exist when I reproduce it in a nextjs project (on which my entire project is based on).
Here are the things that I’ve observed so far.

  • I thought that this could be due to SSR but importing the component using const Comp = dynamic(()=>import("./Comp.tsx"), {ssr: false} still gives the same issue.
  • Only importing the component with yjs deps on client gives same issue
let Comp;
if (typeof window !== "undefined") {
  Comp = require("./Comp").default;
}
  • Turning off react strict mode doesnt help
  • adding webpack alias doest help
webpack: (config) => {
    config.resolve.alias.yjs = path.resolve("./node_modules/yjs");
    return config;
  },

This feature is taking me weeks to implement and so any help would be appreciated!