search

robtaussig / react-use-websocket

React Hook for WebSocket communication
MIT License
1.63k stars 135 forks source link

don't support react@16.14.0? #80

Closed smilexlong closed 3 years ago

smilexlong commented 3 years ago

my react edition is react@16.14.0, use react-use-websocket tell me : npm ERR! While resolving: ant-design-pro@4.5.0 npm ERR! Found: react@16.14.0 npm ERR! node_modules/react npm ERR! react@"^16.14.0" from the root project npm ERR! peer react@">= 16.8.0" from react-use-websocket@2.6.1 npm ERR! node_modules/react-use-websocket npm ERR! react-use-websocket@"" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"17.0.2" from react-dom@17.0.2 npm ERR! node_modules/react-dom npm ERR! react-dom@"^17.0.0" from the root project npm ERR! peer react-dom@">= 16.8.0" from react-use-websocket@2.6.1 npm ERR! node_modules/react-use-websocket npm ERR! react-use-websocket@"" from the root project

just support react@16.8.0 ?

robtaussig commented 3 years ago

Hi @smilexlong,

Thank you for bringing this up, and I apologize for the delay.

I'm a bit confused though because this library only depends on react as a peerDependency, and it does so as leniently as I thought possible:

"dependencies": {},
"peerDependencies": {
  "react": ">= 16.8.0",
  "react-dom": ">= 16.8.0"
},

My understanding of how peerDependencies work is that the library will use whatever version of react is installed in your project's node_modules folders, so long as it satisfies the version requirement, which is anything greater than or equal to 16.8.0. 16.14.0 should satisfy that:

const semver = require('semver');

console.log(semver.satisfies('16.14.0', '>= 16.8.0'));
//=> true
console.log(semver.satisfies('17.0.2', '>= 16.8.0'));
//=> true

Would you mind posting your package.json file here?

I also just checked out ant-design-pro's package.json: https://github.com/ant-design/ant-design-pro/blob/master/package.json

I wonder if this might be causing the issue:

"dependencies": {
    "@ant-design/icons": "^4.0.0",
    "@ant-design/pro-descriptions": "^1.2.0",
    "@ant-design/pro-form": "^1.3.0",
    "@ant-design/pro-layout": "^6.9.0",
    "@ant-design/pro-table": "^2.17.0",
    "@umijs/route-utils": "^1.0.33",
    "antd": "^4.15.0",
    "classnames": "^2.2.6",
    "lodash": "^4.17.11",
    "moment": "^2.25.3",
    "omit.js": "^2.0.2",
    "react": "^16.14.0",
    "react-dev-inspector": "^1.1.1",
    "react-dom": "^17.0.0", //Different version from react@^16.14.0
    "react-helmet-async": "^1.0.4",
    "umi": "^3.4.1",
    "umi-request": "^1.0.8"
  },

ant-design-pro depends on react-dom@^17.0.0, which is not compatible with react@^16.14.0.

smilexlong commented 3 years ago

this is my package.json

{
  "name": "ant-design-pro",
  "version": "4.5.0",
  "private": true,
  "description": "An out-of-box UI solution for enterprise applications",
  "scripts": {
    "analyze": "cross-env ANALYZE=1 umi build",
    "build": "umi build",
    "deploy": "npm run site && npm run gh-pages",
    "dev": "npm run start:dev",
    "fetch:blocks": "pro fetch-blocks && npm run prettier",
    "gh-pages": "gh-pages -d dist",
    "i18n-remove": "pro i18n-remove --locale=zh-CN --write",
    "postinstall": "umi g tmp",
    "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
    "lint:prettier": "prettier --check \"src/**/*\" --end-of-line auto",
    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
    "precommit": "lint-staged",
    "prettier": "prettier -c --write \"src/**/*\"",
    "start": "cross-env UMI_ENV=dev umi dev --port=8001",
    "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev umi dev",
    "start:no-mock": "cross-env MOCK=none UMI_ENV=dev umi dev",
    "start:no-ui": "cross-env UMI_UI=none UMI_ENV=dev umi dev",
    "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev umi dev",
    "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev umi dev",
    "pretest": "node ./tests/beforeTest",
    "test": "umi test",
    "test:all": "node ./tests/run-tests.js",
    "test:component": "umi test ./src/components",
    "tsc": "tsc --noEmit"
  },
  "lint-staged": {
    "**/*.less": "stylelint --syntax less",
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write"
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ],
  "dependencies": {
    "@ant-design/icons": "^4.0.0",
    "@ant-design/pro-descriptions": "^1.2.0",
    "@ant-design/pro-form": "^1.3.0",
    "@ant-design/pro-layout": "^6.9.0",
    "@ant-design/pro-table": "^2.17.0",
    "@umijs/route-utils": "^1.0.33",
    "antd": "^4.12.0",
    "classnames": "^2.2.6",
    "linq": "^3.2.3",
    "lodash": "^4.17.11",
    "moment": "^2.25.3",
    "omit.js": "^2.0.2",
    "react": "^16.14.0",
    "react-dev-inspector": "^1.1.1",
    "react-dom": "^17.0.0",
    "react-helmet-async": "^1.0.4",
    "rxjs": "^6.6.7",
    "umi": "^3.4.1",
    "umi-request": "^1.0.8",
    "websocket-as-promised": "^2.0.1",
    "ws": "^6.2.1"
  },
  "devDependencies": {
    "@ant-design/pro-cli": "^1.0.28",
    "@types/classnames": "^2.2.7",
    "@types/express": "^4.17.0",
    "@types/history": "^4.7.2",
    "@types/jest": "^26.0.0",
    "@types/lodash": "^4.14.144",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-helmet": "^6.1.0",
    "@types/ws": "^7.4.1",
    "@umijs/fabric": "^2.5.1",
    "@umijs/plugin-blocks": "^2.0.5",
    "@umijs/plugin-esbuild": "^1.0.1",
    "@umijs/preset-ant-design-pro": "^1.2.0",
    "@umijs/preset-react": "^1.4.8",
    "@umijs/yorkie": "^2.0.3",
    "carlo": "^0.9.46",
    "chalk": "^4.0.0",
    "cross-env": "^7.0.0",
    "cross-port-killer": "^1.1.1",
    "detect-installer": "^1.0.1",
    "enzyme": "^3.11.0",
    "eslint": "^7.1.0",
    "express": "^4.17.1",
    "gh-pages": "^3.0.0",
    "jsdom-global": "^3.0.2",
    "lint-staged": "^10.0.0",
    "mockjs": "^1.0.1-beta3",
    "prettier": "^2.0.1",
    "puppeteer-core": "^8.0.0",
    "stylelint": "^13.0.0",
    "typescript": "^4.0.3"
  },
  "engines": {
    "node": ">=10.0.0"
  },
  "checkFiles": [
    "src/**/*.js*",
    "src/**/*.ts*",
    "src/**/*.less",
    "config/**/*.js*",
    "scripts/**/*.js"
  ]
}
robtaussig commented 3 years ago

Your package.json doesn't include react-use-websocket as a dependency. Are you just trying to npm install it directly?

I was able to clone https://github.com/ant-design/ant-design-pro but not able to reproduce your error. Are you passing any flags when you run npm install? What version are you using?

smilexlong commented 3 years ago

The above error occurred when I executed ‘npm install --save react-use-websocket‘

robtaussig commented 3 years ago

I'm still unable to reproduce on my machine, using the package.json you provided. What version of npm and node are you running? And if you wouldn't mind, can you try setting react and react-dom to the same version (either both to 17.0.0 or both to 16.14.0) and then try again?