fix(package.json): fixes issues people were having with react 17 and react-sortable-tree

[benatshippabo]

Issues

Many people are having issues with react-sortable-tree after upgrading to React 17. It looks like the cause is using findDOMNode and mismatched React versions due to a peer dependency issue. This PR should resolve the issues.

https://github.com/facebook/react/issues/20131#issuecomment-762783107 https://github.com/frontend-collective/react-sortable-tree/issues/821 https://github.com/frontend-collective/react-sortable-tree/issues/450 https://github.com/frontend-collective/react-sortable-tree/issues/281#issuecomment-719389673 https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone/issues/70

Test steps

1. yarn
2. yarn build
3. in the react-sortable-tree repo
4. yarn add file:$PATH_TO_THIS_REPO/lib
5. add in some yarn resolutions in package.json so storybook will use React 17

"resolutions": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
}

6. yarn storybook
7. test around make sure nothing is broken

[benatshippabo]

@wuweiweiwu @fritz-c could you take a look at this PR please?

[omnidan]

@wuweiweiwu would it be possible to make a new release with this PR merged? this is currently breaking on all projects using the latest react version

[JacobSoderblom]

Any updates on this? We are blocked as well in our project.

[naiaramartin]

We have tested it using patch-package and can confirm it works on React 17

[alyavasilyeva]

hey, is there any hope the PR will be merged this month? reeeeally need this fix :)

[benatshippabo]

@wuweiweiwu @fritz-c any progress on reviewing this pr?

[dottoreFell]

Total newbie here. Could anyone give me simple directions on how to apply patches and use this repo as module in React?

[benatshippabo]

Total newbie here. Could anyone give me simple directions on how to apply patches and use this repo as module in React?

1. Go to the file you want to update in your node_modules folder.
2. Make the changes you desire and save.
3. Generate the patches with the patch-package npm package.
4. Make sure you call patch-package as a postinstall script.
5. Reinstall npm packages npm install or yarn

[dottoreFell]

@benatshippabo thanks for the answer. Should I do that with version from npm or with the github version? The npm version seem to be different from this version. I tried to patch the npm version but then I was getting compilation errors:

./node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js SyntaxError: C:\Users\Michal\source\simpleEDM\simpleedm_gui_old\node_modules\frontend-collective-react-dnd-scrollzone\lib\index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (61:24):

  59 | export function createScrollingComponent(WrappedComponent) {
  60 |   class ScrollingComponent extends Component {
> 61 |     static displayName = `Scrolling(${getDisplayName(WrappedComponent)})`;
     |                        ^
  62 |
  63 |     static propTypes = {
  64 |       // eslint-disable-next-line react/forbid-prop-types

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-class-properties (https://git.io/vb4yQ) to the 'plugins' section to enable parsing.

Is it normal behavior after patching and I should change babel configuration?

[benatshippabo]

Is it normal behavior after patching and I should change babel configuration?

@dottoreFell Definitely not normal behavior 🤔 , probably just install and list the babel plugin

[dottoreFell]

Sorry, but I am not sure how to understand it. Should I install https://www.npmjs.com/package/babel-plugin ? It seems that I know too little about packages and wasting Your time. It's not likely, but maybe some day one of the maintainers will have time and mercy and will just merge this patch :D

[benatshippabo]

@wuweiweiwu @fritz-c if everything looks good, could you please merge this?

[ThaddeusJiang]

waiting for this 🙏

[LuisAlejandro]

Please merge

[michal-grzelak]

@wuweiweiwu @fritz-c Hi, all necessary work was done in this PR. Could You please merge it? There are many people waiting for that 🙂

[dhavyd]

Please merge :-)

[dhavyd]

Interesting, I have tested a lot, removing node_modules, yarn.lock and package-lock.json several times... When I install with npm, using React 17, I get that react-sortable-tree requires React 16. I f I use npm install --force then it's installed, but I get the following error in my app

If I use yarn install instead, then it works!

Note that I'm using isVirtualized={false} in both cases.

[matyas-igor]

@wuweiweiwu @fritz-c please merge when possible, waiting for these fixes as well! 😀

[bentron2000]

Adding my bit - please merge :)

[kmvan]

Why nobody merge?

[sorinpav]

Could anyone please merge this? Thank you!

It appears that there are no conflicts with the base branch either, it just needs anyone with write access to this repo. Thanks again!

[kmvan]

Could anyone please merge this? Thank you!

It appears that there are no conflicts with the base branch either, it just needs anyone with write access to this repo. Thanks again!

The project is dead.