Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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