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

Question

While running npm test I got following error:

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 necessary packages seem to be installed. I reinstalled react-dom, but it didn't 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';

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

Answer 1

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

Answer 2

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.

Answer 3

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!

Answer 4

I was getting the same error when I am working on a new react project with typescript + vite, but what I found out was some of my dependencies were outdated, then I follow this steps to resolve this issue.

1. List item
2. I deleted my node_module
3. I run npm install
4. Then I run npm update --force
5. Then I install the lates types/react-dom and types/react by running npm install --save-dev @types/react-dom@latest @types/react@latest in the terminal