search

box / box-ui-elements

React Components for Box's Design System and Pluggable Components
https://developer.box.com/docs/box-ui-elements
Other
539 stars 303 forks source link

Support for React 18 #3381

Closed yaelsch closed 2 months ago

yaelsch commented 1 year ago

We recently upgraded to react 18 and noticed that the drag and drop functionality of the content uploaded is effected. If you drop two files to the drop zone, only one appears in the list. I downgraded to react 17 and made sure that indeed the cause to the bug is react 18.

I noticed in your documentation that you currently don't support react 18, do you have plans to upgrade soon? Or alternatively, is there a way to workaround this issue?

mgug01 commented 1 year ago

We also need React 18 and react-router-dom 6 support. Currently on React 18.2.0 and react-router-dom 6.4.2. I was able to install the package, but received about 82 errors about missing dependencies.

Are there any workarounds or do we have a roadmap for support?

yaelsch commented 1 year ago

@mgug01 for react-router-dom 6 we used a workaround:

In our package.json we have the following entries:

    "react-router-dom": "5.3.0",
    "react-router-dom-latest": "npm:react-router-dom@6.14.1",

In our code we alway use react-router-dom-latest to import from the latest version, and the react-router-dom dependency is used by box.

I think this should solve the errors your mentioned, but you can still encounter runtime errors due to react-18 not being supported..

mgug01 commented 1 year ago

Thanks so much @yaelsch I'll give this a try. I had just about given up on using the library at all, but this gives hope! Update: That seemed to help the react-router-dom issue, but I am still getting around 29 dependency errors. A lot of them should be in the package itself:

ERROR in ./node_modules/box-ui-elements/es/elements/content-explorer/ItemList.js 10:0-65
Module not found: Error: Can't resolve '@box/react-virtualized/dist/es/AutoSizer'

ERROR in ./node_modules/box-ui-elements/es/elements/content-explorer/ItemList.js 21:0-43
Module not found: Error: Can't resolve '@box/react-virtualized/styles.css'

ERROR in ./node_modules/box-ui-elements/es/elements/content-explorer/ItemGrid.js 44:0-65
Module not found: Error: Can't resolve '@box/react-virtualized/dist/es/AutoSizer'

I didn't see anything in the documentation about all these dependencies including others like, react-popper, react-measure, react-modal, react-teather.... I feel like this is also related to React 18, but interested to hear if you had to install these as well @yaelsch

yaelsch commented 1 year ago

@mgug01 , yes I see in my package.json the following dependencies

"@box/react-virtualized": "9.22.3-rc-box.2",
"react-popper": "2.2.5",
"react-measure": "2.5.2",
"react-modal": "3.14.4",
"react-tether": "1.0.0",

We added them a long time ago, before we used React 18, I don't remember the details, probably bumped into the same errors 🤷‍♀️

I agree that the documentation around it isn't that great.. Hopefully the maintaining team can clarify some of these requirements

pmoresi-jsr commented 10 months ago

How would we request for this ticket to be prioritized by Box?

cglango commented 7 months ago

@box/react-virtualized Does not support React 18. react-virtualized@^9.22.4 Does support React 18. According to this readme box is maintaining its own fork of this package. Where is the repository for that? (I don't see anything at https://github.com/box/react-virtualized) Can we contribute a PR to support React 18? Or can you update your package file there please?

mgug01 commented 5 months ago

According to Box support, the best way for them to prioritize this update is by voting in the Pulse webpage: https://pulse.box.com/forums/909778-help-shape-the-future-of-box/suggestions/47771126-box-ui-elements-support-for-react-18

For all future visitors of this thread, please cast your vote. This package is still unusable for myself and many others.

mgug01 commented 4 days ago

@greg-in-a-box Thank you for taking action on this request! Just began testing this again, although I am still running into a lot of dependency issues, even after running --legacy-peer-deps on install. Specifically with query-string a couple of others and then it also seems there are issues between the latest version of react-router-dom (which our app is using) and the version used by this package. Is there additional investigation being done to allow for React 18 support?