Cannot find module `node_modules/@testing-library/jest-dom/dist/index.mjs` Did you mean to `import "lodash/isEqualWith.js`

[alamenai]

• @testing-library/react version: ^16.0.1
• Testing Framework and version: "vitest": "^2.1.3"
• DOM Environment: "jsdom": "^25.0.1",

Vitest config

import react from "@vitejs/plugin-react"
import { resolve } from "path"
import { defineConfig } from "vitest/config"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },

  test: {
    alias: {
      lodash: 'lodash-es',
    },
    globals: true,
    environment: "jsdom",
    setupFiles: "./setupTests.ts",
    coverage: { provider: "v8", reporter: ["html", "lcov"], enabled: true },
    exclude: ["**/node_modules/**", "**/dist/**", "**/e2e/**"],
  },
})

What you did:

Everything was working well and without updating the dependencies, I started seeing this error.

What happened:

Reproduction:

npm run test where test a script in the package json :

{
  "name": "esg",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "test": "vitest run",
    "test-ui": "vitest --ui",
    "test-watch": "vitest --watch",
    "test-e2e": "npx playwright test",
    "test-e2e-ui": "npx playwright test --ui",
    "test-e2e-report": "npx playwright show-report",
    "start": "next start",
    "lint": "next lint",
    "lint-staged": "npx lint-staged",
    "lint-style": "npx stylelint src/*.css src/**/**/*.css"
  },
  "dependencies": {
    "@clerk/localizations": "^3.2.1",
    "@clerk/nextjs": "^5.7.3",
    "@headlessui/tailwindcss": "^0.2.1",
    "@hookform/resolvers": "^3.9.0",
    "@mapbox/mapbox-gl-draw": "^1.4.3",
    "@mapbox/mapbox-gl-draw-static-mode": "^1.0.1",
    "@mapbox/mapbox-gl-geocoder": "^5.0.3",
    "@mapbox/search-js-react": "1.0.0-beta.22",
    "@mdx-js/loader": "^3.0.1",
    "@mdx-js/react": "^3.0.1",
    "@next/mdx": "^14.2.15",
    "@radix-ui/react-accordion": "^1.2.1",
    "@radix-ui/react-alert-dialog": "^1.1.2",
    "@radix-ui/react-aspect-ratio": "^1.1.0",
    "@radix-ui/react-checkbox": "^1.1.2",
    "@radix-ui/react-collapsible": "^1.1.1",
    "@radix-ui/react-dialog": "^1.1.2",
    "@radix-ui/react-dropdown-menu": "^2.1.2",
    "@radix-ui/react-hover-card": "^1.1.2",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-popover": "^1.1.2",
    "@radix-ui/react-radio-group": "^1.2.1",
    "@radix-ui/react-select": "^2.1.2",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slider": "^1.2.1",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.1",
    "@radix-ui/react-tabs": "^1.1.1",
    "@radix-ui/react-toast": "^1.2.2",
    "@radix-ui/react-toggle": "^1.1.0",
    "@radix-ui/react-toggle-group": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.1.3",
    "@react-three/fiber": "^8.17.10",
    "@reduxjs/toolkit": "^2.3.0",
    "@sentry/nextjs": "^8.34.0",
    "@terraformer/wkt": "^2.2.1",
    "@testing-library/react-hooks": "^8.0.1",
    "@tremor/react": "^3.18.3",
    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
    "@turf/turf": "^7.1.0",
    "@types/mdx": "^2.0.13",
    "@types/node": "22.7.5",
    "@types/three": "^0.169.0",
    "@yudiel/react-qr-scanner": "^2.0.8",
    "chai-colors": "^1.0.1",
    "chart.js": "^4.4.5",
    "class-variance-authority": "^0.7.0",
    "classnames": "^2.5.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.0",
    "contentlayer": "^0.3.4",
    "date-fns": "^4.1.0",
    "dotenv": "^16.4.5",
    "embla-carousel-react": "^8.3.0",
    "eslint-config-next": "^14.2.15",
    "eslint-plugin-simple-import-sort": "^12.1.1",
    "framer-motion": "^11.11.9",
    "html2canvas": "^1.4.1",
    "i18next": "^23.16.0",
    "i18next-browser-languagedetector": "^8.0.0",
    "i18next-resources-to-backend": "^1.2.1",
    "istanbul-lib-coverage": "^3.2.2",
    "jspdf": "^2.5.2",
    "lucide-react": "^0.453.0",
    "mapbox-gl": "^3.7.0",
    "next": "^14.2.15",
    "next-contentlayer": "^0.3.4",
    "next-router-mock": "^0.9.13",
    "next-themes": "^0.3.0",
    "normalize.css": "^8.0.1",
    "nuqs": "^1.20.0",
    "proj4": "^2.12.1",
    "react": "^18.3.1",
    "react-day-picker": "^9.1.4",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.53.0",
    "react-i18next": "^15.0.3",
    "react-redux": "^9.1.2",
    "react-to-print": "^3.0.1",
    "recharts": "^2.13.0",
    "redux-persist": "^6.0.0",
    "sharp": "^0.33.5",
    "simplex-noise": "^4.0.3",
    "sonner": "^1.5.0",
    "stylelint": "^16.10.0",
    "swr": "^2.2.5",
    "tailwind-merge": "^2.5.4",
    "tailwindcss-animate": "^1.0.7",
    "three": "^0.169.0",
    "tsconfig-paths-jest": "^0.0.1",
    "usehooks-ts": "^3.1.0",
    "vaul": "^1.1.0",
    "whatwg-fetch": "^3.6.20",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.25.7",
    "@clerk/testing": "^1.3.11",
    "@commitlint/cli": "^19.5.0",
    "@commitlint/config-conventional": "^19.5.0",
    "@playwright/test": "^1.48.1",
    "@testing-library/jest-dom": "^6.6.0",
    "@testing-library/react": "^16.0.1",
    "@testing-library/user-event": "^14.5.2",
    "@types/date-fns": "^2.6.0",
    "@types/mapbox__mapbox-gl-draw": "^1.4.8",
    "@types/proj4": "^2.5.5",
    "@types/react": "^18.3.11",
    "@types/react-dom": "^18.3.1",
    "@types/terraformer__wkt": "^2.0.3",
    "@typescript-eslint/eslint-plugin": "^8.9.0",
    "@typescript-eslint/parser": "^8.9.0",
    "@vitejs/plugin-react": "^4.3.2",
    "@vitest/coverage-v8": "^2.1.3",
    "@vitest/ui": "^2.1.3",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.12.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-jsx-a11y": "^6.10.0",
    "eslint-plugin-react": "^7.37.1",
    "eslint-plugin-react-hooks": "^5.0.0",
    "fetch-mock": "^11.1.5",
    "husky": "^9.1.6",
    "jsdom": "^25.0.1",
    "lint-staged": "^15.2.10",
    "msw": "^2.4.11",
    "node-fetch": "^3.3.2",
    "nyc": "^17.1.0",
    "postcss": "^8.4.47",
    "prettier": "^3.3.3",
    "stylelint-config-standard": "^36.0.1",
    "stylelint-prettier": "^5.0.2",
    "tailwindcss": "^3.4.14",
    "ts-node": "^10.9.2",
    "typescript": "5.6.3",
    "vitest": "^2.1.3"
  }
}

Problem description:

It seems an internal issue with the package itself

Suggested solution:

[edlucas]

Several of the distribution files (in @testing-library/jest-dom/dist) are attempting to import lodash/isEqualWith. This is in addition to importing the correct file lodash/isEqualWidth.js.

An example from index.js:

...
require('lodash/isEqualWith.js');
require('css.escape');
require('lodash/isEqualWith');
...

In my project's node_modules/@testing-library, this occurs in index.js, index.mjs, matchers.mjs, and matchers-12582698.mjs. By commenting out the broken require and import statements, I can eliminate the error and run my tests.

[james-mou]

before the library owners fix this, this is what you can do:

1. open up your package.json file
2. locate any lines that start with @testing-library (I don't care to know which one is broken)
3. remove the caret (^) before the version number ==> this will prevent automatic minor version updates, assuming your test used to work, whatever version you had in there was a good version, stick to it
4. remove dist, node_modules
5. reinstall the dependencies
6. rebuild
7. run tests
8. In a month or two, put the carets back and see if it is still broken, automatic minor version update is a good thing to have in most cases, if it is still broken, curse the library owner and go back to step 1.

[edlucas]

My compatriot figured out the quick solution is to use the latest jest-dom.

npm i -D -w=packages/client @testing-library/jest-dom@latest

[MatanBobi]

This has been resolved in #642 :)