box-ui-elements icon indicating copy to clipboard operation
box-ui-elements copied to clipboard

Can't install Box UI Elements v15.0.0 - draft.js

Open KevinForys opened this issue 2 years ago • 12 comments

Environment:

  • Ubuntu 20.04.5 LTS
  • Node 16.17.0
  • NPM 8.15.0
  • Box UI Elements 15.0.0
  • React 17.0.2

Steps to reproduce the problem:

I'm currently trying a minimal sandbox app with the latest Box UI Elements, I'm blocked at the first step :

$ npm install --save [email protected]
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: Test Box UI [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0" from [email protected]
npm ERR! node_modules/draft-js
npm ERR!   draft-js@"^0.10.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

My package.jon (dependencies are a copy/paste from the peer dependencies of Box UI Elements package.json v15.0.0) :

{
  "name": "Test Box UI Elements",
  "version": "0.0.1",
  "description": "Starter template",
  "private": "true",
  "main": "index.js",
  "scripts": {
    "start": "",
    "build": ""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": { },
  "dependencies": {   
        "@box/cldr-data": "^34.2.0",
        "@box/react-virtualized": "9.22.3-rc-box.2",
        "@hapi/address": ">=2.0.0 <2.1.2",
        "axios": "^0.25.0",
        "classnames": "^2.2.5",
        "color": "^3.1.2",
        "draft-js": "^0.10.1",
        "filesize": "^4.1.2",
        "form-serialize": "^0.7.2",
        "formik": "^2.0.0",
        "ilib-tree-node": "^1.2.0",
        "immutable": "^3.7.4",
        "intl-messageformat": "^7.8.4",
        "js-sha1": "0.6.0",
        "jsuri": "^1.3.1",
        "lodash": "^4.17.5",
        "message-accumulator": "^2.1.1",
        "mousetrap": "^1.6.3",
        "pikaday": "^1.8.0",
        "query-string": "5.1.1",
        "react": "^17.0.2",
        "react-animate-height": "^2.0.8",
        "react-beautiful-dnd": "^9.0.2",
        "react-dom": "^17.0.1",
        "react-draggable": "^3.3.0",
        "react-immutable-proptypes": "^2.1.0",
        "react-intl": ">=2.9.0",
        "react-measure": "^2.3.0",
        "react-modal": "^3.8.1",
        "react-popper": "^1.3.4",
        "react-process-string": "^1.2.0",
        "react-responsive": "8.2.0",
        "react-router-dom": "^5.0.0",
        "react-scrollbars-custom": "^4.0.21",
        "react-tether": "^1.0.0",
        "react-textarea-autosize": "^7.1.0",
        "regenerator-runtime": "^0.13.2",
        "sanitize-html": "1.21.1",
        "sass": "1.34.1",
        "scroll-into-view-if-needed": "^2.2.20",
        "tabbable": "^1.1.2",
        "uuid": "^3.3.2"
  }
}

What went wrong? (Screenshots, console logs, or HAR files can be helpful here)

The peer dependencies of Box UI Elements 15.0.0 required React 17 and draft-js 0.10.1.

But draft-js 0.10.1 not accept React 17...

How can I avoid / fix properly this error? I want to stay on Box UI Elements 15 and React 17.

Thanks to the community 🙂

KevinForys avatar Sep 06 '22 12:09 KevinForys

@KevinForys, please downgrade your node version to v14 or lts/fermium. We haven't thoroughly tested box-ui-elements with higher version yet.

Let us know if anything else goes wrong and create a new issue.

greg-in-a-box avatar Sep 07 '22 17:09 greg-in-a-box

Hi there,

Tested with node 14 (official deb package) : the issue is the same.

npm i box-ui-elements

npm WARN [email protected] requires a peer of react@^17.0.1 but none is installed. You must install peer dependencies yourself.`

then npm i draft-js@^0.10.1

npm WARN [email protected] requires a peer of react@^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0 but none is installed. You must install peer dependencies yourself.

euidzero avatar Sep 08 '22 11:09 euidzero

@euidzero what version of react are you using? if youre using react 18, you may see errors.

greg-in-a-box avatar Sep 08 '22 17:09 greg-in-a-box

I did not install anything else just try to install box-ui-element in a fresh empty directory with npm.

euidzero avatar Sep 09 '22 07:09 euidzero

I had luck downgrading npm to 6.14.17

scottapow avatar Sep 09 '22 19:09 scottapow

@euidzero please ensure you are using node 14 with react 17, other major combinations may not properly work. If that doesn't work, can you provide your code so we can evaluate the issue since I cannot seem to reproduce the issue

greg-in-a-box avatar Sep 09 '22 19:09 greg-in-a-box

At that stage there's not even code. Simply installing both box-ui-elements 15 (requires react 17) and its dependencie draftjs@^0.10.1 (requires react <17) leads to an unsolvable conflict.

npm 6.14.17 will accept to install both packages with a warning : if the code does not use draftjs this might work. later npm version will simply throw an unrecoverable error.

Getting rid of the draftjs dependency (no more maintained) would solve this.

euidzero avatar Sep 13 '22 09:09 euidzero

@greg-in-a-box is there a roadmap for when the UI Elements will become compatible with the latest LTS version of Node?

jprokay-tb avatar Sep 13 '22 16:09 jprokay-tb

Running into this as well. Our project is on React 17, but box-ui-element's dependency on (now defunct?) draft-js which doesn't support React 17 is breaking installation.

$ npm install box-ui-elements
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!   peer react@"^17.0.1" from [email protected]
npm ERR!   node_modules/box-ui-elements
npm ERR!     box-ui-elements@"*" from the root project
npm ERR!   2 more (@box/react-virtualized, react-dom)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0" from [email protected]
npm ERR! node_modules/draft-js
npm ERR!   peer draft-js@"^0.10.1" from [email protected]
npm ERR!   node_modules/box-ui-elements
npm ERR!     box-ui-elements@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

erikvanzijst avatar Apr 06 '23 11:04 erikvanzijst

Like others reported, I was able to get it installed on React 17 after downgrading to node 14 (lts/fermium) and npm 6.14.

erikvanzijst avatar Apr 06 '23 17:04 erikvanzijst

Great to see this library supports node 18! Any updates on roadmap for react 18 support? We would be happy to help

jprokay-tb avatar Jun 27 '23 18:06 jprokay-tb

The problem is probably that the dependencies of this package is not correct. The npm install using node 18 doesn't run without --legacy-peer-deps flag.

Like the internal box linter configuration package @box/frontend uses deprecated versions of packages, which were updated in this repository. These changes should be updated in the linter and other helper packages.

If I remove every development dependency for testing (I think those could be removed from the published package.json file BTW), then I still have conflicts in the dependencies of the package:

npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^17.0.1" from the root project
npm ERR!   peer react@"^15.3.0 || ^16.0.0-alpha || ^17.0.1" from @box/[email protected]
npm ERR!   node_modules/@box/react-virtualized
npm ERR!     peer @box/react-virtualized@"9.22.3-rc-box.6" from the root project
npm ERR!   1 more (react-dom)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0" from [email protected]
npm ERR! node_modules/draft-js
npm ERR!   peer draft-js@"^0.10.1" from the root project

To resolve the issue a deeper digging is needed to resolve issues with transient dependencies in the used packages.

Also, the react is a peer dependency for the compiled es modules. For the files in the compiled dist folder the react is included. It would probably be a good idea to separate this two library. The current one for es modules and another one for the compiled ones with react. There the react is not a peer dependency. During building of the compiled project the job could reuse the es modules.

csutorasr avatar Aug 25 '23 18:08 csutorasr

https://github.com/box/box-ui-elements/pull/3580

greg-in-a-box avatar Jul 16 '24 16:07 greg-in-a-box