[Bug] npm install fails with upstream dependency conflicts

[afefer]

trafficstars

Version

1.0.2 (TS version)

Reproduction link

https://jsfiddle.net/

Operating System

macOS Ventura 13.4.1 (c)

Device

MacBook Pro (14-inch, 2023)

Browser & Version

Microsoft Edge 115.0.1901.183 (arm64)

Steps to reproduce

1. Download v1.0.2 zip file
2. Extract and run npm install

What is expected?

Software should install without upstream dependency failures and without a requirement to use --force or --legacy-peer-deps.

What is actually happening?

Software fails to install with following error:

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@"18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from @asseinfo/[email protected]
npm ERR! node_modules/@asseinfo/react-kanban
npm ERR!   @asseinfo/react-kanban@"2.2.0" 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.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/alex/.npm/_logs/2023-07-28T20_22_46_739Z-eresolve-report.txt

---

Solution

Material Dashboard Pro 2 React should not have dependencies on packages that are no longer supported and are not secure / not tested with React 18.

Additional comments

@sajadevo - I saw you closed a similar issue #315 with a comment that these issues had been fixed in the non-TS v2.2.0 (although they still seem to persist if I install and run 2.2.0 of the non-TS version). Is there a plan to actually fix these dependency issues in the TS version?

[afefer]

package.json from v.1.0.2 below:

{
  "name": "material-dashboard-2-pro-react-ts",
  "version": "1.0.2",
  "private": true,
  "description": "React + TypeScript version of Material Dashboard 2 PRO by Creative Tim",
  "dependencies": {
    "@asseinfo/react-kanban": "2.2.0",
    "@emotion/cache": "11.11.0",
    "@emotion/react": "11.11.0",
    "@emotion/styled": "11.11.0",
    "@fullcalendar/core": "6.1.7",
    "@fullcalendar/daygrid": "6.1.7",
    "@fullcalendar/interaction": "6.1.7",
    "@fullcalendar/react": "6.1.7",
    "@fullcalendar/timegrid": "6.1.7",
    "@mui/icons-material": "5.11.16",
    "@mui/material": "5.13.1",
    "@mui/styled-engine": "5.12.3",
    "@react-jvectormap/core": "1.0.4",
    "@react-jvectormap/world": "1.1.2",
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/react": "14.0.0",
    "@testing-library/user-event": "14.4.3",
    "@types/jest": "29.5.1",
    "@types/node": "20.2.3",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    "chart.js": "3.0.1",
    "chroma-js": "2.4.2",
    "draft-convert": "^2.1.13",
    "draft-js": "^0.11.7",
    "dropzone": "5.9.3",
    "flatpickr": "4.6.13",
    "formik": "2.2.9",
    "html-react-parser": "3.0.16",
    "react": "18.2.0",
    "react-chartjs-2": "3.0.4",
    "react-dom": "18.2.0",
    "react-draft-wysiwyg": "^1.15.0",
    "react-flatpickr": "3.10.13",
    "react-images-viewer": "1.7.1",
    "react-router-dom": "6.11.2",
    "react-scripts": "5.0.1",
    "react-table": "7.8.0",
    "stylis": "4.2.0",
    "stylis-plugin-rtl": "2.1.1",
    "typescript": "5.0.4",
    "uuid": "9.0.0",
    "web-vitals": "3.3.1",
    "yup": "1.1.1"
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/chroma-js": "2.4.0",
    "@types/draft-convert": "^2.1.4",
    "@types/draft-js": "^0.11.10",
    "@types/dropzone": "5.7.4",
    "@types/react-draft-wysiwyg": "^1.13.4",
    "@types/react-flatpickr": "3.8.8",
    "@types/react-table": "7.7.14",
    "@types/uuid": "9.0.1",
    "eslint": "8.41.0",
    "eslint-config-prettier": "8.8.0",
    "eslint-plugin-import": "2.27.5",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-plugin-react": "7.32.2",
    "eslint-plugin-react-hooks": "4.6.0",
    "prettier": "2.8.8",
    "eslint-import-resolver-typescript": "3.5.5"
  },
  "overrides": {
    "svgo": "3.0.2"
  }
}

[afefer]

The dependencies which fail are:

react-kanban (dead library, no longer maintained) chart-js and react-chartjs-v2 (this requires a migration to chart-js v4.x, which has breaking changes) react-images-viewer (also dead library, no longer maintained)

Additionally, installation will fail unless "react-scripts": { "typescript": "^5" } is added to the overrides section of package.json.

[SensorLeo]

Same issue here.

[jwalters221]

Same dependency issues with npm install on v2.2.0

[figueroa-r]

I wish I would have been able to see these issues before purchasing... I bought a react kit and have seen that almost all the templates have this issue... why pay money for a product that has issues right from the start...

[uromerom]

Please, we need the fix version for the TS version.

[sajadevo]

This issue is fixed on v2.2.1 for JavaScript version