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

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:6
  • Comments:7

github_iconTop GitHub Comments

13reactions
wildwind20001commented, May 3, 2022

I solved it this way.

import Draggable from ‘react-draggable’; … const Draggable1: any = Draggable; <Draggable1 …> … </Draggable1>

3reactions
wildwind20001commented, Apr 24, 2022

Me too.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to solve: Type error: 'Draggable' cannot be used as a ...
Type error: 'Draggable' cannot be used as a JSX component. Its instance type 'Draggable' is not a valid JSX element. The types returned...
Read more >
Component cannot be used as a JSX component in React
The error Component cannot be used as a JSX component occurs for multiple reasons, returning an array of JSX elements instead of a...
Read more >
How to solve: Type error: 'Draggable' cannot be used as a ...
Coding example for the question How to solve: Type error: 'Draggable' cannot be used as a JSX component ? (react-draggable)-Reactjs.
Read more >
cannot be used as a jsx component. its instance type is not ...
Sometimes, we want to fix the error 'Component cannot be used as a JSX component. Its return type 'Element[]' is not a valid...
Read more >
Component cannot be used as a jsx component | nextjs _app.tsx
Join this channel to get access to perks:https://www.youtube.com/channel/UCoSpmr2KNOxjwE_B9ynUmig/joinMy GearCamera ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found