nomcopter
React 19 deprecation warning: `InternalMosaicWindow2` accesses `element.ref`
I'm seeing this deprecation warning when using React 19:
Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release. Component Stack:
InternalMosaicWindow2 MosaicWindow.tsx:64
ConnectedInternalMosaicWindow MosaicWindow.tsx:260
MosaicWindow2 react-mosaic-component.js:8857
div unknown:0
div unknown:0
MosaicRoot2 MosaicRoot.tsx:15
div unknown:0
MosaicWithoutDragDropContext2 react-mosaic-component.js:7861
DndProvider2 DndProvider.tsx:28
Mosaic2 react-mosaic-component.js:7994
It would probably make sense to access element.props.ref and fall back to element.ref if that doesn't exist.
Wondering if anyone is looking at this ? It flows through to the App errors screen in browser tools
I think the issue is in react-dnd, on this line:
https://github.com/react-dnd/react-dnd/blob/1dd1bcdd39d9545fdbb319e34ddbeecf0fb9d89c/packages/react-dnd/src/internals/wrapConnectorHooks.ts#L70
Unfortunately it looks like that library is unmaintained.
You should change your code https://github.com/react-dnd/react-dnd/issues/3655#issuecomment-2562092314
We currently use this library but as it's more time consuming to rewrite into dockview.dev or golden-layout, decided to work on fork with support for
- cjs/esm build
- tree structure
- tab support
- no react 19 warnings
If somebody would like to try alpha, here is it https://lonli-lokli.github.io/react-mosaic/
I revert my project's react version, use react v18 "react": "^18.2.0", "react-dom": "^18.2.0", and type library "@types/react": "^18.2.7", "@types/react-dom": "^18.2.4", seems not have this element.ref error
Would use this but i get this warning all the time:
Console Error: Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.
Also @Lonli-Lokli s fork doesnt fix it for me; also it uses window which is not available in server components.
Well, well
// you can suppress errors to feel better using the mosaic lib w/react19 :)
if (typeof window !== 'undefined') {
const originalError = console.error;
console.error = (...args) => {
const msg = args[0];
if (
(typeof msg === 'string' &&
msg.includes('Accessing element.ref was removed in React 19')) ||
msg.includes('Each child in a list should have a unique "key" prop')
) {
return;
}
originalError(...args);
};
}