'How to solve: Type error: 'Draggable' cannot be used as a JSX component ? (react-draggable)

I get this error while building this Next.js React project

Type error: 'Draggable' cannot be used as a JSX component.
    Its instance type 'Draggable' is not a valid JSX element.
        The types returned by 'render()' are incompatible between these types.
            Type 'React.ReactNode' is not assignable to type 'import("/app/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
                Type '{}' is not assignable to type 'ReactNode'.

We weren't getting this error before, and the code and the dependencies are the same.
What could be happening?

This is my package.json

{
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "build+start": "next build && next start",
        "type-check": "tsc --pretty --noEmit",
        "format": "prettier --write .",
        "lint": "eslint --no-error-on-unmatched-pattern 'src/**/*.{tsx,ts}'",
        "test": "jest",
        "test-all": "yarn lint && yarn type-check && yarn test",
        "build:widget": "webpack --config ./src/widgets/webpack.config.js",
        "prepare": "husky install"
    },
    "dependencies": {
        "@apollo/client": "^3.2.2",
        "@fortawesome/fontawesome-svg-core": "^1.2.35",
        "@fortawesome/free-solid-svg-icons": "^5.15.3",
        "@fortawesome/react-fontawesome": "^0.1.14",
        "@material-ui/core": "^4.11.0",
        "@material-ui/icons": "^4.9.1",
        "@segment/analytics.js-core": "^4.0.0-beta.0",
        "@segment/analytics.js-integration-segmentio": "^4.2.5",
        "@segment/snippet": "^4.13.1",
        "@types/analytics-node": "^3.1.6",
        "@types/react-dom": "^17.0.9",
        "@types/segment-analytics": "^0.0.33",
        "@types/uuid": "^8.3.0",
        "@zeit/next-sass": "^1.0.1",
        "analytics-node": "^5.1.0",
        "axios": "^0.20.0",
        "formik": "^2.2.0",
        "graphql": "^15.3.0",
        "mobx": "^5.15.4",
        "mobx-react": "^6.2.2",
        "moment": "^2.29.0",
        "next": "9.5.3",
        "next-absolute-url": "^1.2.2",
        "next-routes": "^1.4.2",
        "player.js": "^0.1.0",
        "postcss": "^8.2.15",
        "react": "^16.13.1",
        "react-cookie": "^4.1.1",
        "react-dom": "^16.13.1",
        "react-draggable": "^4.4.3",
        "react-lines-ellipsis": "^0.14.1",
        "react-player": "^2.9.0",
        "react-router-dom": "^5.2.0",
        "rxjs": "^6.6.3",
        "sass": "^1.35.2",
        "socket.io-client": "^4.4.0",
        "subscriptions-transport-ws": "^0.9.18",
        "uuid": "^3.4",
        "webpack": "4.44.1",
        "xml": "^1.0.1",
        "yup": "^0.29.3"
    },
    "devDependencies": {
        "@babel/plugin-proposal-class-properties": "^7.10.4",
        "@babel/plugin-proposal-decorators": "^7.10.5",
        "@testing-library/react": "^10.0.1",
        "@types/jest": "^25.1.4",
        "@types/node": "^13.9.5",
        "@types/react": "^16.9.27",
        "@typescript-eslint/eslint-plugin": "^4.1.0",
        "@typescript-eslint/parser": "^4.1.0",
        "babel-jest": "^25.2.3",
        "css-modules-typescript-loader": "^4.0.1",
        "enzyme": "^3.11.0",
        "enzyme-adapter-react-16": "^1.15.4",
        "enzyme-to-json": "^3.5.0",
        "eslint": "^6.8.0",
        "eslint-config-airbnb": "^18.2.0",
        "eslint-config-airbnb-typescript": "^10.0.0",
        "eslint-config-next": "^11.0.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-import-resolver-typescript": "^2.3.0",
        "eslint-plugin-import": "^2.22.0",
        "eslint-plugin-jest": "^24.0.0",
        "eslint-plugin-jsx-a11y": "^6.3.1",
        "eslint-plugin-prettier": "^3.1.4",
        "eslint-plugin-react": "^7.20.6",
        "eslint-plugin-react-hooks": "^4.1.1",
        "file-loader": "^6.2.0",
        "husky": "^7.0.4",
        "jest": "^25.2.3",
        "jest-watch-typeahead": "^0.5.0",
        "lint-staged": "^10.0.10",
        "prettier": "^2.1.1",
        "prettier-stylelint": "^0.4.2",
        "sass-lint": "^1.13.1",
        "sass-loader": "^10.2.0",
        "style-loader": "^2.0.0",
        "stylelint": "^13.7.0",
        "stylelint-config-prettier": "^8.0.2",
        "stylelint-config-sass-guidelines": "^7.1.0",
        "stylelint-config-standard": "^20.0.0",
        "stylelint-prettier": "^1.1.2",
        "stylelint-scss": "^3.18.0",
        "ts-loader": "^8.0.1",
        "typescript": "^4.3.3",
        "url-loader": "^4.1.1",
        "webpack-cli": "^3.3.12"
    }
}
reactjstypescriptnpmjsxdraggable


Solution 1:[1]

@types/react-dom has its own dependencies and one of them is @types/react with a version set to '*' - a major release

I believe you are trying to do a fresh npm install with no package-lock.json due to which there is a mismatch of @types/react version as it is probably referring to 18

You can resolve this by following steps:

Run npm i force-resolutions

In your package.json add

"resolutions":{
  "@types/react": "17.0.0", // or "16.9.27"
  "@types/react-dom": "17.0.9"
},

ADD "preinstall": "npx force-resolutions" to your scripts

Delete your node_modules and Run npm install

By using resolutions we are specifying strict restrictions for dependencies of dependencies.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions