Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support react v18 and Strict Mode #293

Closed
4 of 5 tasks
100terres opened this issue Apr 4, 2022 · 43 comments · Fixed by #322
Closed
4 of 5 tasks

Support react v18 and Strict Mode #293

100terres opened this issue Apr 4, 2022 · 43 comments · Fixed by #322
Assignees
@100terres
Labels
dependencies enhancement New feature or request epic high priority
Milestone
React v18

Comments

@100terres
Copy link
Collaborator

100terres commented Apr 4, 2022 •
edited
Loading

Everything that need to be done in order to support react v18 will be tracked in this issue. You can also have a look at the React v18 milestone.

We are in the early stage of the investigation, so the list is not yet exhaustive. New issue will be added as we discover them.

Must have

Nice to have
@100terres 100terres added enhancement New feature or request dependencies labels Apr 4, 2022
@100terres 100terres self-assigned this Apr 4, 2022
This was referenced Apr 4, 2022
Closed
Closed
@antoinejaussoin
Copy link

Yes please!!

@Paul6552 Paul6552 mentioned this issue Apr 9, 2022
Closed
@100terres 100terres pinned this issue Apr 9, 2022
@100terres 100terres linked a pull request Apr 9, 2022 that will close this issue
Add support for react v18 #316
Closed
@100terres
Copy link
Collaborator Author

100terres commented Apr 9, 2022 •
edited
Loading

The work is in progress. I'll try to have something working as soon as possible 🙂

@antoinejaussoin
Copy link

That's awesome, thanks for the work!! Let me know if I can help with testing in a real-world project.

@jacokok
Copy link

jacokok commented Apr 10, 2022

Would this include support for strict mode or should we create a new issue for that.

Currently using <React.StrictMode> with react 18 is not working.

@100terres
Copy link
Collaborator Author

Would this include support for strict mode or should we create a new issue for that.

@jacokok it feels like something we'll investigate separately. I'll open a new issue to see how we could support strict mode.

@100terres 100terres added this to the React v18 milestone Apr 10, 2022
@100terres 100terres added the epic label Apr 10, 2022
@100terres
Copy link
Collaborator Author

100terres commented Apr 10, 2022 •
edited
Loading

@jacokok I've updated the description of the issue to include strict mode support.

@antoinejaussoin
Copy link

Would this include support for strict mode or should we create a new issue for that.

Currently using <React.StrictMode> with react 18 is not working.

Actually that was mainly what I was interested in. Good luck with the work!

@100terres 100terres removed a link to a pull request Apr 11, 2022
Add support for react v18 #316
Closed
@100terres 100terres linked a pull request Apr 11, 2022 that will close this issue
feat(deps): add support for react 18 #322
Merged
@100terres
Copy link
Collaborator Author

100terres commented Apr 13, 2022 •
edited
Loading

The migration from Enzyme to @testing-library/react is going well. There is only one file to refactor. You can follow the progress here: #323

I'll work start to work on Run test suite for react v16, v17 and v18 real soon 🙂

@100terres 100terres mentioned this issue Apr 14, 2022
Merged
@100terres
Copy link
Collaborator Author

The migration from Enzyme to @testing-library/react is done ✔️

Next step: Run test suite for react v16, v17 and v18 🙂

@100terres 100terres mentioned this issue Apr 24, 2022
Closed
@MLNW MLNW mentioned this issue Apr 29, 2022
Closed
@100terres 100terres mentioned this issue May 3, 2022
Open
@Domino987
Copy link

Any news on this 🙂 we are blocked with our upgrading to react 18🙉

@Toshinaki
Copy link

Toshinaki commented Jul 13, 2022 •
edited
Loading

It's been a while. Any progress on this?🙂

For anyone want a dnd, stop waiting and try this https://github.com/clauderic/dnd-kit
Not easy to use, but very powerful.

@AlimovSV
Copy link

Any news?

@AntonOfTheWoods
Copy link

Pretty the only reasonable choice is for one of us lurkers to finish the work here, or move to react-dnd...

@jacokok
Copy link

jacokok commented Jul 21, 2022

@Toshinaki , ok, sorry I missed that it's a drop-in replacement. That is very interesting! Having to reimplement most of the logic can make moving to another lib a massive hassle but if dnd-kit is just point to the new lib and "It Works!", then that is definitely awesome, thanks!

I migrated to dnd-kit. It was not a drop in replacement. It took me a bit longer than anticipated, but works really well.

Check out this comment atlassian/react-beautiful-dnd#2399 (comment) on getting this lib to work with strict mode.

@Will-Babbitt
Copy link

Will-Babbitt commented Jul 27, 2022 •
edited
Loading

I migrated to dnd-kit. It was not a drop in replacement. It took me a bit longer than anticipated, but works really well.

Im trying to do the same now and struggling with getting click events to work with dnd-kit.

@100terres
Copy link
Collaborator Author

Sorry for keeping you all waiting! 😬 I'm still trying to find the time to make it work, but as many of you might have notice it's not an easy fix... and it will take a lot of my free time (outside of work) to support react v18.

I still plan on making it work in the upcoming months, because I need this for a personal project and for work. But if you are in a rush to migrate your codebase to react v18 then I would suggest to not wait for react-forked/dnd to support the latest version of react and move to another library.

If anyone has the time to to do all the refactoring needed I'll be more then happy to review your pull request!

Sorry again and I hope you understand.

@Xhale1
Copy link
Collaborator

Xhale1 commented Aug 13, 2022 •
edited
Loading

@100terres I'm using react-beautiful-dnd for a few projects that required react 18 and I wasn't sure how progress was coming along so I forked your work and released @hello-pangea/dnd which supports react 18 and strict mode.

We needed our own fork so we could develop new features with a semi-regular cadence, and I intend to further develop the library there.

It would never have been possible without your truly amazing work on the original react-beautiful-dnd. I cannot thank you enough for what you've accomplished here. And no worries on being caught up with life stuff, you don't owe anyone anything. I've certainly left some github issues open for much longer than I'd like before, it happens.

@AntonOfTheWoods
Copy link

@100terres I'm using react-beautiful-dnd for a few projects that required react 18 and I wasn't sure how progress was coming along so I forked your work and released @hello-pangea/dnd which supports react 18 and strict mode.

We needed our own fork so we could develop new features with a semi-regular cadence, and I intend to further develop the library there.

It would never have been possible without your truly amazing work on the original react-beautiful-dnd. I cannot thank you enough for what you've accomplished here. And no worries on being caught up with life stuff, you don't owe anyone anything. I've certainly left some github issues open for much longer than I'd like before, it happens.

It would have saved me a couple of very annoying days of work if you had posted about this work a couple of weeks ago!

@Xhale1
Copy link
Collaborator

Xhale1 commented Aug 13, 2022

It would have saved me a couple of very annoying days of work if you had posted about this work a couple of weeks ago!

Haha, timing could have been a bit better. Did you end up migrating to dnd kit? If so how do you like it compared to react beautiful dnd?

@caleb531
Copy link

Hi all,

I've been watching this issue closely, and I would just like to add a few thoughts:

I am using react-beautiful-dnd for one of my projects, and maybe the most important reason I chose it is how natural the interactivity feels. This is best explained in Alex Reardon's blog post that introduces the library:

In react-beautiful-dnd a dragging item's impact is based on its centre of gravity — regardless of where a user grabs an item from. A dragging items impact follows similar rules to a set of scales ⚖️.

This is a mechanic I feel like most other DND libraries get wrong, and something that's largely unique to RBDND. However, it seems that dnd-kit also implements the same behavior, if you play with their examples. So I am encouraged in that respect, in that I might be able to switch to dnd-kit without sacrificing a natural UX.

Of course, it would be great to see react-forked/dnd gain React 18 support, but in the interim, dnd-kit may prove to be a worthy alternative.

@Xhale1
Copy link
Collaborator

Xhale1 commented Aug 13, 2022

Of course, it would be great to see react-forked/dnd gain React 18 support, but in the interim, dnd-kit may prove to be a worthy alternative.

@caleb531 I created a fork of this which supports react 18 (it's like two comments up 🙂)

@hello-pangea/dnd

https://github.com/hello-pangea/dnd

@AntonOfTheWoods
Copy link

AntonOfTheWoods commented Aug 14, 2022 •
edited
Loading

Haha, timing could have been a bit better. Did you end up migrating to dnd kit? If so how do you like it compared to react beautiful dnd?

@Xhale1 react-dnd. I found examples pretty close to what I needed so just went with that. I also found that the touch version actually works fine for the browsers I need on the desktop, so that made things a little simpler. I haven't actually pushed to prod yet though so might even just bite the bullet on that if yours works out of the box migrating from react-beautiful-dnd!

@100terres
Copy link
Collaborator Author

Hi @Xhale1

I'm using react-beautiful-dnd for a few projects that required react 18 and I wasn't sure how progress was coming along so I forked your work and released @hello-pangea/dnd which supports react 18 and strict mode.

Happy to see that you've managed to make it work with react 18! I'll have a look at what you did 🙂 Maybe you've found and fix the issue I was stuck on!

It would never have been possible without your truly amazing work on the original react-beautiful-dnd. I cannot thank you enough for what you've accomplished here.

It was a lot of late night coding, but it was really fun to do. I've learned so much by migrating the repo from Flow to TypeScript and more. Thank you for this recognition 🙂

I might try reach you in the upcoming days!

@100terres
Copy link
Collaborator Author

I might try reach you in the upcoming days!

Hi @Xhale1!

I just send you an email to the gmail address on your GitHub profile page. I sent it from gab@100terres.com.

Let me know if you received it 🙂

@100terres
Copy link
Collaborator Author

100terres commented Aug 20, 2022 •
edited
Loading

Thanks to @Xhale1 fork 🙏 I was able to move forward on some of the blockers I faced. If everything continue to go we'll I might able to release a beta version this weekend!

Here's the new pull request to follow: #392

@AntonOfTheWoods
Copy link

AntonOfTheWoods commented Aug 20, 2022 •
edited
Loading

@100terres I guess the issue is that it is a bit of a risk, given that there was a very long silence, even after several people offered help. Would you consider having others (like @Xhale1 ) as maintainers on this repo?

@Xhale1
Copy link
Collaborator

Xhale1 commented Aug 20, 2022 •
edited
Loading

@100terres I guess the issue is that it is a bit of a risk, given that there was a very long silence, even after several people offered help. Would you consider having others (like @Xhale1 ) as maintainers on this repo?

@AntonOfTheWoods I totally get your concern. Gab and I are in touch about maintaining this repo, we'll be providing more details this weekend.

Our current plan is to move this repository to hello-pangea where both he and I will serve as maintainers. I certainly want to help guarantee a strong future for this project 😀 and I'm confident that our working together will be extremely beneficial for this lib

@100terres
Copy link
Collaborator Author

100terres commented Aug 21, 2022 •
edited
Loading

@100terres I guess the issue is that it is a bit of a risk [...] Would you consider having others (like @Xhale1 ) as maintainers on this repo?

As mentioned by @Xhale1 we'll soon have more details for you 🙂 but this project is not dead yet! 🎉

There's always a risk in open source development that a project will go un-maintained, but the beauty is that since the code is freely available, anyone can keep it alive if they have the motivation and the time 🙂

given that there was a very long silence

Again sorry to have disappointed you and let you down. It can be difficult to find the right balance between personal life, work and maintaining a complex open source project. I'll do better in the future and I'm sure that with the help of @Xhale1 we'll be able to prevent this situation from happening again.

@100terres
Copy link
Collaborator Author

This pull request is open (#392). It would help, if some of you have the time to do a review 🙂

It tackles

Once it's merge we'll be ready to release a beta version supporting react 18 and it's new strict mode behavior 🙂

@100terres
Copy link
Collaborator Author

Beta version released!

https://github.com/react-forked/dnd/releases/tag/v15.0.0-beta.0
https://www.npmjs.com/package/@react-forked/dnd/v/15.0.0-beta.0

@100terres 100terres reopened this Aug 21, 2022
@100terres
Copy link
Collaborator Author

Version 15.0.0 is now released! It supports react 18, strict mode and drop ie 11. Have fun!

@100terres 100terres mentioned this issue Aug 23, 2022
Closed
17 tasks
@Xhale1
Copy link
Collaborator

Xhale1 commented Aug 24, 2022

@AntonOfTheWoods and others, it's official! @100terres and I are co-maintaining this library as part of the Pangea organization :)

I think y'all will enjoy the results of our consolidated efforts going forward 👍

@AntonOfTheWoods
Copy link

Thanks very much to both @Xhale1 and @100terres and sorry for the pressure! Now I will definitely be able to avoid going down the react-dnd path. Awesome!

@100terres 100terres changed the title Support react v18 [v15.0.0] Support react v18 Aug 24, 2022
@AntonOfTheWoods
Copy link

It's confirmed, absolutely flawless, drop in replacement for react-beautiful-dnd. You are both legends, thanks!

JinhuiKim added a commit to JinhuiKim/react-todo-app that referenced this issue Sep 23, 2022
@JinhuiKim
Fix: react-beautiful-dnd React v18 StrictMode 모드 미지원
2e8f37c 
- hello-pangea/dnd#293
- hello-pangea/dnd#317

Drag and Drop 기능 추가하기
@RIP21
Copy link

RIP21 commented Oct 7, 2022 •
edited
Loading

One last thing that you guys probably need to do to make it 100% compatible with React 18 is to bump dependedncy of use-memo-one because this one causes peerDependencies issue in React 18 codebase.

└─┬ @hello-pangea/dnd 16.0.0
  └─┬ use-memo-one 1.1.2
    └── ✕ unmet peer react@"^16.8.0 || ^17.0.0": found 18.2.0

Version 1.1.3 fixes that.

@100terres
Copy link
Collaborator Author

100terres commented Oct 14, 2022 •
edited
Loading

@RIP21 I've made a new release v16.0.1 should fix the issue you are facing.

@100terres 100terres changed the title [v15.0.0] Support react v18 Support react v18 and Strict Mode Sep 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@100terres 100terres

Labels
dependencies enhancement New feature or request epic high priority
Projects
None yet
Milestone
React v18
Development

Successfully merging a pull request may close this issue.

feat(deps): add support for react 18 hello-pangea/dnd