如何解决:输入错误：'Draggable‘不能用作JSX组件？(反应-拖拉)

Question

在构建这个Next.js React项目时，我得到了这个错误

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'.  

我们以前没有收到过这个错误，代码和依赖项是相同的。

会发生什么事？

这是我的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"
    }
}

Answer 1

@type/ set dom有它自己的依赖项，其中之一是@type/react，其版本设置为“*”--这是一个主要版本

我相信您正在尝试做一个没有package-lock.json的新package-lock.json，因为它可能指的是18版本，因此@types/react版本不匹配。

您可以通过以下步骤解决此问题：

运行npm i force-resolutions

在您的package.json添加

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

将"preinstall": "npx force-resolutions"添加到脚本中

删除node_modules并运行npm install

通过使用解析，我们指定了对依赖项的依赖项的严格限制。