@types/react@18 breaks "everything"

[Jeniczech]

Hello there, I was hoping if someone could help me out of my misery. Even tough I am using the 16.9.19 version, all of the sudden all my projects stopped working after removing node modules, the lock file and running yarn install. I am getting all sort of errors that have never appeared before. Those errors are mainly coming from 3rd party libraries such as 'react-inlinesvg', 'react-datetime' or 'google-map-react', but also from my custom components. Just to show a few:

TS2769: No overload matches this call.   Overload 1 of 2, '(props: Props | Readonly<Props>): googleMapReact', gave the following error...

TS2786: 'SVG' cannot be used as a JSX component.

TS2786: 'DatePicker' cannot be used as a JSX component.

TS2322: Type 'TFunctionResult' is not assignable to type 'ReactNode'.

TS2786: 'C' cannot be used as a JSX component.   Its element type 'ReactElement<any, any> | Component<{}, any, any>' is not a valid JSX element.

Here's my package.json:

"dependencies": {
    "@types/file-saver": "^2.0.1",
    "@types/html2canvas": "^0.0.36",
    "@types/i18next": "^13.0.0",
    "@types/lodash": "^4.14.161",
    "@types/moment": "^2.13.0",
    "@types/react-i18next": "^8.1.0",
    "@types/react-redux": "^7.1.9",
    "@types/react-router": "^5.1.8",
    "@types/react-router-dom": "^5.1.5",
    "autoprefixer": "^9.8.5",
    "bootstrap": "4.4.1",
    "core-js": "^3.6.4",
    "dom-to-image": "^2.6.0",
    "file-saver": "^2.0.2",
    "html-to-image": "^1.7.0",
    "i18next": "^19.6.2",
    "lodash": "^4.17.20",
    "moment": "^2.27.0",
    "react": "^16.12.0",
    "react-beautiful-dnd": "^13.1.0",
    "react-datetime": "^3.0.4",
    "react-dom": "^16.12.0",
    "react-i18next": "^11.7.0",
    "react-inlinesvg": "^2.0.1",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-toastify": "^5.5.0",
    "redux": "^4.0.5",
    "regenerator-runtime": "^0.13.3",
    "xlsx": "^0.16.8"
  },
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "@babel/preset-typescript": "^7.8.3",
    "@types/react": "^16.9.19",
    "@types/react-beautiful-dnd": "^13.0.0",
    "@types/react-dom": "^16.9.5",
    "@typescript-eslint/eslint-plugin": "^3.7.0",
    "@typescript-eslint/parser": "^3.7.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-module-resolver": "^4.0.0",
    "css-loader": "^3.4.2",
    "eslint": "^7.5.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.20.4",
    "eslint-plugin-react-hooks": "^4.0.8",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.13.1",
    "postcss-loader": "^3.0.0",
    "resolve-url-loader": "^3.1.1",
    "sass-loader": "^8.0.2",
    "source-map-loader": "^0.2.4",
    "style-loader": "^1.1.3",
    "stylelint": "^13.6.1",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-scss": "^3.18.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.5",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  }
}

and tsconfig:

{
  "compilerOptions": {
    "outDir": "dist/",
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es2015",
    "jsx": "react",
    "baseUrl": "./",
    "paths": {
      "./*": ["src/*", "src/*/index"]
    },
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "./src/**/*"
  ]
}

Please, does anyone have an idea, what may be the problem? Thanks.

[theIYD]

#59765

Check the above issue. Use resolutions to specify your react types version in package.json.

Reason: Some of your packages might be dependent on wildcard version of react types i.e latest which caused yarn to install the latest version.

[symbiont-matthew-pirocchi]

Check the above issue. Use resolutions to specify your react types version in package.json.

Just to be clear, isn't this fix essentially "downgrade @types/react back to v17"?

The reason that I'm encountering this issue in the first place is that I'm upgrading to react 18. I want the v18 types, not the v17 types.

[theIYD]

Check the above issue. Use resolutions to specify your react types version in package.json.

Just to be clear, isn't this fix essentially "downgrade @types/react back to v17"?

The reason that I'm encountering this issue in the first place is that I'm upgrading to react 18. I want the v18 types, not the v17 types.

The above workaround is only if you want an older version of react types.

If you want v18 of types, you need to add children in your props in order to fix the issue which majority is facing with their projects. If 3rd party dependencies are throwing an error due to the wildcard in their package.json, either library owners fix this or you need to use resolutions here to continue use a specific version of the dependency

Reference: https://twitter.com/dan_abramov/status/1512833611401150474

[Atmos4]

A fix that might work is to alias React to your installed version.

In your tsconfig:

{
  "compilerOptions": {
    ...your compiler options...
    "paths" : {
      ...your path aliases...
      "react": ["./node_modules/@types/react/index"]
    }
  }
}

I had some version resolution problems and I fixed it like that. Let me know if it works.