search

projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.45k stars 1.16k forks source link

React 18 support #929

Closed robbinjanssen closed 1 year ago

robbinjanssen commented 2 years ago

Will you support react 18, and do you have any idea what changes need to be made to support this? 👍 Happy to help if I got some pointers on what to do.

CodeMaven commented 2 years ago

I would like to migrate my project to React 18 but this is currently the only dependency that is holding me back. Some other dependencies that I am using now I cannot update because they have moved to React 18.

maxtsh commented 2 years ago

I want this also !

akichim21 commented 2 years ago

👍

CodeMaven commented 2 years ago

Release notes for 6.7.4 indicate that react 18 should be supported. However I still get: npm ERR! Could not resolve dependency: npm ERR! peer react@"16. || 17." from @projectstorm/react-canvas-core@6.7.4 npm ERR! node_modules/@projectstorm/react-canvas-core npm ERR! @projectstorm/react-canvas-core@"^6.7.4" from the root project

vadimshvetsov commented 1 year ago

I've opened the PR to resolve peer deep, but right now you can override deps dependency. For example if you use npm add this to package.json with your react version:

  "overrides": {
    "@projectstorm/react-canvas-core": {
      "react": "$react" // or version here
    }
  }
scottdickerson commented 1 year ago

after we upgraded @types/react to 18, we also had to override this ProjectStorm type:

/ @ts-ignore
// eslint-disable-next-line implicit-dependencies/no-implicit
import { TransformLayerWidgetProps } from '@projectstorm/react-canvas-core'

// fixes an issue where children prop is removed from React.Component in React v18
// Remove when the React 18 release is official and tested: https://github.com/projectstorm/react-diagrams/releases/tag/v6.7.4
declare module '@projectstorm/react-canvas-core' {
  class TransformLayerWidget extends React.Component<
    PropsWithChildren<TransformLayerWidgetProps>
  > {}
}