'Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js'

hope someone could help me here.

while running npm test got following mistake

Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js'
Required stack:
node_modules/@testing-library/react/dist/pure.js
node_modules/@testing-library/react/dist/index.js

all neccesserry packages seem to be installed. I was trying to reinstall react-dom and didnot help. Below providing imports used in my test file:

import React from "react";
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';

was trying to solve this for few days... thank you in advance for any help

P.S.Additionally providing my package.json

{
  "name": "fe",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fontsource/roboto": "^4.5.3",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.5.0",
    "@mui/material": "5.5.3",
    "@mui/styles": "^5.5.1",
    "@reduxjs/toolkit": "^1.8.0",
    "@testing-library/jest-dom": "5.16.3",
    "@testing-library/react": "13.0.0",
    "@testing-library/user-event": "14.0.4",
    "axios": "^0.26.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.28.1",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.2",
    "react-scripts": "5.0.0",
    "redux": "^4.1.2",
    "styled-components": "^5.3.5",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/jest": "^27.4.0",
    "@types/node": "^16.11.25",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "@types/styled-components": "^5.1.24",
    "@typescript-eslint/eslint-plugin": "^5.12.0",
    "@typescript-eslint/parser": "^5.12.0",
    "eslint": "^8.9.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.4.0",
    "eslint-import-resolver-typescript": "^2.5.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "prettier": "2.5.1",
    "typescript": "^4.5.5"
  }
}
reactjstypescriptunit-testing


Solution 1:[1]

I think it's because your @testing-library/react using the newer version, just test with version of 12.1.2

Solution 2:[2]

I can confirm that downgrading the lib from 13.0.0 to 12.0.4 did the trick with react 17.0.2.

Solution 3:[3]

According to @testing-library/react release notes, version 13 (and above) has dropped support for React 17 and bellow. So using this library with React <= 17 will cause this error (or maybe others).

You can downgrade to any version of @testing-library/react bellow 13 to fix it. At the time of this writing the latest would be 12.1.5 which works fine with React 17.

Another option is to upgrade React to 18 and above.

Solution 4:[4]

I was also getting the error "Cannot find module 'react-dom/client'" without mention of @testing-library/react.

Looks like the syntax to hook up the react-redux Provider has changed here: https://react-redux.js.org/introduction/getting-started (in the code block where it mentions "// As of React 18").

To get this to work I had to make sure I was on version 18 or above for react and react-dom, and updated all other client npm packages too. Many needed to be updated with: npm update package-name --legacy-peer-deps

Took me a few hours to figure this out. Hope it helps someone!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 quippv
Solution 2 Mogsdad
Solution 3 Rui Marques
Solution 4 protoplan

Related Questions