React 18 Support Needed

[kksanghi]

Describe the bug

When trying to use component, getting an issue stating

'Responsive' cannot be used as a JSX component.
Its instance type 'Responsive' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.

Are we planning to update the type definitions to support React 18 ? If we have work around let us know

Your Example Website or App

NA

Steps to Reproduce the Bug or Issue

Try to Integrate Component Using React 18

Expected behavior

Should work with React 18

react-grid-layout library version

Type definitions for react-grid-layout 1.3

Operating System Version

Windows

Browser

Chrome

Additional context

No response

Screenshots or Videos

No response

[jarrisondev]

@kksanghi I'm using this library on React 18 and works fine.

See below a capture of my code:

[jedzej]

The compatibility table in https://github.com/react-grid-layout/react-grid-layout/blob/master/README.md#features doesn't mention React 18, which makes the impression that it's not supported. If it's supported, it'd be great if the docs would reflect it.

[agustaf9]

@kksanghi I'm using this library on React 18 and works fine.

It seems to work fine, but the error mentioned shows up in the console

[mpotane]

Install @types/react-grid-layout

[github-pratik]

ERESOLVE overriding peer dependency
npm WARN While resolving: react-grid-system@7.3.2
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN peerOptional react@"^16.9.0 || ^17.0.0 || ^18" from @reduxjs/toolkit@1.9.5
npm WARN node_modules/@reduxjs/toolkit
npm WARN @reduxjs/toolkit@"^1.9.5" from the root project
npm WARN 13 more (nextjs-websocket, react-chat-engine-advanced, ...)

I am getting this issue, Is it because of react 18 version not supported by react-grid

[mgprieto-soincon]

There's any plan for React 18 Support?

[BoxedFruits]

It does not work for me with Nextjs13

 ✓ Ready in 4.4s
 ○ compiling /page ...
 ✓ Compiled /page in 3.4s (519 modules)
TypeError: Super expression must either be null or a function
    at _inherits (webpack-internal:///(rsc)/./node_modules/react-draggable/build/cjs/DraggableCore.js:137:15)
    at eval (webpack-internal:///(rsc)/./node_modules/react-draggable/build/cjs/DraggableCore.js:263:5)
    at eval (webpack-internal:///(rsc)/./node_modules/react-draggable/build/cjs/DraggableCore.js:473:2)
    at (rsc)/./node_modules/react-draggable/build/cjs/DraggableCore.js (/home/kdot/ReactProjects/linktree-clone/.next/server/vendor-chunks/react-draggable.js:30:1)
    at __webpack_require__ (/home/kdot/ReactProjects/linktree-clone/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/react-draggable/build/cjs/Draggable.js:27:45)
    at (rsc)/./node_modules/react-draggable/build/cjs/Draggable.js (/home/kdot/ReactProjects/linktree-clone/.next/server/vendor-chunks/react-draggable.js:20:1)
    at __webpack_require__ (/home/kdot/ReactProjects/linktree-clone/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/react-draggable/build/cjs/cjs.js:2:16)
    at (rsc)/./node_modules/react-draggable/build/cjs/cjs.js (/home/kdot/ReactProjects/linktree-clone/.next/server/vendor-chunks/react-draggable.js:40:1)
    at __webpack_require__ (/home/kdot/ReactProjects/linktree-clone/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/react-grid-layout/build/GridItem.js:8:23)
    at (rsc)/./node_modules/react-grid-layout/build/GridItem.js (/home/kdot/ReactProjects/linktree-clone/.next/server/vendor-chunks/react-grid-layout.js:20:1)
    at __webpack_require__ (/home/kdot/ReactProjects/linktree-clone/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/react-grid-layout/build/ReactGridLayout.js:11:40)
    at (rsc)/./node_modules/react-grid-layout/build/ReactGridLayout.js (/home/kdot/ReactProjects/linktree-clone/.next/server/vendor-chunks/react-grid-layout.js:30:1)
    at __webpack_require__ (/home/kdot/ReactProjects/linktree-clone/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/react-grid-layout/index.js:2:18)
    at (rsc)/./node_modules/react-grid-layout/index.js (/home/kdot/ReactProjects/linktree-clone/.next/server/vendor-chunks/react-grid-layout.js:110:1)
    at __webpack_require__ (/home/kdot/ReactProjects/linktree-clone/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./app/page.tsx:11:75)
    at (rsc)/./app/page.tsx (/home/kdot/ReactProjects/linktree-clone/.next/server/app/page.js:184:1)
    at Function.__webpack_require__ (/home/kdot/ReactProjects/linktree-clone/.next/server/webpack-runtime.js:33:42)
    at async Re (/home/kdot/ReactProjects/linktree-clone/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:1:578021)
    at async tree (/home/kdot/ReactProjects/linktree-clone/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:1:583966)
    at async et (/home/kdot/ReactProjects/linktree-clone/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:1:583792)
    at async et (/home/kdot/ReactProjects/linktree-clone/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:1:584513)
    at async tt (/home/kdot/ReactProjects/linktree-clone/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:1:584874)
    at async /home/kdot/ReactProjects/linktree-clone/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:1:588341 {
  digest: '525736055'
}

Edit:
react-grid-layout/react-draggable#472 (comment)
add "use client"