A strange problem caused by react-i18next

[hungtcs]

Summary

react-i18next might cause getRootProps has been attached to the DOM more than once

Steps to reproduce

Sorry I can't reproduce this error stably.

More Detail

I'm going to use remirror in my react project. I created an empty react project using pnpm create vite@latest first to briefly test if remirror would work for my needs. After everything was ready, I copied the code of the demo project to the real project, But at this point, remirror is not working properly and make the following error.

RemirrorError: `getRootProps` has been attached to the DOM more than once. 
It should only be attached to the dom once per editor. 
Called 2 times For more information visit https://remirror.io/docs/errors#rmr0201

After some troubleshooting, I finally located a line of code, this is a search box component in the header nav of my project.

export function Search() {
  const { t } = useTranslation(["search"]);

  // ...
}

1. If I comment out this line, remirror goes back to working.
2. If I change the search namespace to any other value, it also works fine.
3. If I use the search namespace once before in the parent component of the Search component, that's fine too.
4. Other components also use the above line of code, but it does not cause problems. I'm guessing it's because Search is the first time I've used it.

My guess is that react-i18n is doing something that happens to affect remirror, but I've been trying for a long time and nothing's come of it.

My Remirror component has been minimized and contains only two lines of code

const { manager } = useRemirror({});
return <Remirror manager={manager} />

So I created this issues, do you think there are any situations that may cause this error?

Thanks.

Screenshot(s)

[boardy]

Not sure if you fixed this or not but had a similar issue and come across this, but found that reactStrictMode needs to be turned off, when strict mode is enabled, everything get's re-rendered twice for some reason and triggers this problem.

[jensstalder]

I had the same issue, and it took me a while to also realize its strict mode. Could this be fixed somehow? I think this might be eating up time for devs and makes them frustrated. I also would like to re-enable strict mode, since it does catch issues.

My particular problem was not i18next so maybe a red-herring? I am using nextjs though.

[boardy]

Yea I'm not sure if NextJS was the issue itself, I think it was more React Strict mode. I'm not sure if its fixable without turning strict mode off. I've not really too much difference in having strict mode on or off in my development, so not too bothered about it being off.

[gary-jensen]

I'm also having this problem, I think strict mode is a great tool which catches errors early in development. I'm going to have to use a different package, as this makes it completely unusable to me

[berks2029]

This is definitely triggered by StrictMode. StrictMode forces component to render twice in development to catch weird state bugs that devs often make.

It would be great if this error check could be turned off? Or if it could trigger if called more than twice?

[queenvictoria]

Hey so I thought I'd try and fix this and then I saw this in the CHANGELOG:

1.0.0-next.2

2020-07-06

Minor Changes

• Add support for React.StrictMode.

  Previously, activating StrictMode would cause the components to render twice and break functionality of RemirrorProvider due to an outdated check on whether getRootProps had been called. This check has been removed since it isn't needed anymore.

So clearly it once worked or works in other cases. In NextJS 15.4.x, and in my use case, I notice that adding reactStrictMode: false doesn't throw the error. And in a test case using "this demostrates the error" copied from here it doesn't. So I think there might be something else going on here.

[rodrigovallades]

This bug happens with React 19 and StrictMode enabled. Previous versions of React didn't not trigger this (was using 18.3.1 without problems, the bug manifested itself after I updated it to 19.1.1).

After browsing through the issues listing, I fear that this project has been abandoned. We might not get React 19 support.

[Aw3same]

I'm facing the same problem. After trying to avoid as many renders as posible (such as memoization, caching getRootProps, etc..) , it seems that the only solution here is adding reactStrictMode: false. Did anyone found another solution?

[benadamstyles]

This is no longer limited to just StrictMode. This now also manifests when using Remirror inside an <Activity /> component that gets hidden then re-shown.