Type error: 'Draggable' cannot be used as a JSX component

[ErnestoBorio]

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"
        }
    }

[wildwind20001]

Me too.

[RootJian]

Me too.

[dht]

I had the same issue when the react-draggable was installed in the wrong package in the mono repo. If you're using a mono repo perhaps installing it as a dependency of the right package can help. Could be related. In my case the issue had nothing to do with the package itself.

[wildwind20001]

I solved it this way.

import Draggable from 'react-draggable'; ... const Draggable1: any = Draggable; <Draggable1 ....> ...

[dht]

@wildwind20001 This means disabling typescript and it means you won't have:

• type checking while building
• type completion for Draggable's properties (defaultPosition, onStart, etc..).

IMHO, it's quite a price to pay for solving this issue locally.

[ErnestoBorio]

@dht Do you know that times when boss wants to have the app working for yesterday? Well, that. I wonder why is it so difficult that dependencies don't break your project when you didn't even change a thing.

[DimaLapshyn]

Looks like the root cause of this issue if that many 3rd party libraries do not care about the version of @types/react they require through their dependencies. Now that there's a breaking change in ReactNode declaration between v17 and v18 (v17 allows empty React Fragments, but v18 does not seem to allow them), one has to either apply the trick with type erasure described above, or to patch the v17 type definition like this:

type ReactFragment = Iterable<ReactNode>;

[el-j]

I solved it this way.

import Draggable from 'react-draggable'; ... const Draggable1: any = Draggable; <Draggable1 ....> ...

thanks for the idea! i fixed it like this:

import * as React from "react";
import { Draggable as Draggable1, DraggableProps } from "react-beautiful-dnd";
export const Draggable = Draggable1 as React.ComponentClass<DraggableProps>;

export default Draggable