React 19 deprecation warning: `InternalMosaicWindow2` accesses `element.ref`

[printfn]

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.

[pbower]

Wondering if anyone is looking at this ? It flows through to the App errors screen in browser tools

[printfn]

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.

[Lonli-Lokli]

You should change your code
react-dnd/react-dnd#3655 (comment)

[Lonli-Lokli]

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/

[CharlesSpace]

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

[finnmglas]

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.

[finnmglas]

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);
  };
}

[CharlesSpace]

Downgrade react 19 to react 18, and there will be no such error

[Lonli-Lokli]

I will check React 19 next week

[Lonli-Lokli]

@finnmglas can you try latest version?