Cannot find module 'react-dom/test-utils' from 'act-compat.js' - reactjs

I cannot seem to resolve why I'm receiving this error: Here are my configs:
lang-js
react - 15.3.1
react-dom - 15.3.1
react-testing-library - 6.0.0
jest - 23.6.0
lang-js
import React from 'react';
import { render, fireEvent, cleanup } from 'react-testing-library';
afterEach(cleanup);
test('loads and displays ', async() => {
})
I commented on an open GH issue on the react-testing-library page. Thanks in advance

This may have happened if something got modified or deleted in your react-dom dependency package.
Using yarn
You can verify that already installed files in node_modules did not get removed, reinstalling any missing files by using:
npm install --check-files
That should help you restore react-dom to what it should be.
If that doesn't work, you can always try to completely remove and reinstall all of your packages. From your project root folder, try:
rm -rf node_modules
yarn install
Using npm
First, you can try just to install react-dom again. That might solve your problem:
npm install react-dom
If that doesn't work, then you can try to reinstall all of your packages to get a fresh copy.
From your project root folder, try:
rm -rf node_modules
npm install

Related

React 'Module Not Found' when running Nextjs Website

I am migrating an existing react app to Nextjs to improve the routing and take advantage of some of the features. I am running into an error that I cannot troubleshoot.
I installed the dependencies of the original application using
npm install. And after migrating the dependencies in the package.json.
When I run
npm list react
I receive all of these dependency errors. Nextjs requires react ^18.2.0 currently.
npm list react error
Is there something wrong with the versioning of these peer dependencies and using the current version of react? Is there a simple way to troubleshoot this other than rewriting the code to use different packages?
React is specified as ^18.2.0 in the dependencies in the package.json.
Please check your package.json and add react ^18.2.0 to the dependencies list and run npm i again. You'll need to delete the package-lock.json file first.
Or just run:
npm i react react-dom #types/react #types/react-dom
You can Try to delete your package-lock file and run rm -rf node_modules, npm cache clean --force, and then run npm i again. Hope it helps!

Problems with installing SASS React

I want to install SASS to my react app.
I try yarn add node-sass my console return error:
./src/comopnents/Form/Form.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/comopnents/Form/Form.scss)
Node Sass version 7.0.1 is incompatible with ^4.0.0.
I found advice to uninstall node-sass and install sass. I did it, but then I have got this error:
../src/comopnents/Form/Form.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/comopnents/Form/Form.scss) To import Sass files, you first need to install node-sass. Run npm install node-sass or yarn add node-sass inside your workspace. Require stack:
/Users/madlen/(...)/node_modules/sass-loader/lib/loader.js
/Users/madlen/(...)/node_modules/loader-runner/lib/loadLoader.js
/Users/madlen/(...)/node_modules/loader-runner/lib/LoaderRunner.js
/Users/(...)/node_modules/webpack/lib/NormalModule.js
/Users/(...)/node_modules/webpack/lib/NormalModuleFactory.js
/Users/(...)/node_modules/webpack/lib/Compiler.js
/Users/(...)/node_modules/webpack/lib/webpack.js
/Users/(...)/node_modules/react-scripts/scripts/start.js
I try to upgrate yarn, add sass-loader, nothing helps
Do this in your package json
"node-sass": "npm:sass#^1.49.9",
React still asks for node-sass after removing it and replacing with sass so you can alias it like this and now react will use sass
Maybe try updating your project's react-scripts, as doing so fixed the issue for me.
I was having the same issue - saw advice elsewhere to switch node-sass out for sass, and then had the same errors mentioned in the OP. Tried Mark O's solution to alias sass, which worked. However, then I tried setting up absolute imports in my project (with jsconfig.json in the way described here), and that was mysteriously failing too.
I then realized that my project had a very old version of react-scripts for some reason, as it was on 2.x.x. So I swapped react-scripts in my package.json to be "react-scripts": "4.0.3", ran npm install, did npm run start and now absolute imports work. I then tried using sass instead of node-sass again and that works too (npm uninstall node-sass, then npm install sass).
try stopping the current development server, and install node-sass again.
I was having similar problem. These steps fixed my problem.
Delete node_modules rm -rf node_modules
Delete package-lock.json rm package-lock.json
Run npm install or yarn install
I am using;
node-sass: ^6.0.1
npm: 7.24.2
node: v16.13.0

Can't resolve 'react-dom' in /ButtonBase'

I'm trying to run a React project created in Mac, I had not this problem neither in Windows or Mac, but I'm facing the following errors when I try to run (npm start) in Ubuntu:
./node_modules/#material-ui/core/esm/ButtonBase/ButtonBase.js
Module not found: Can't resolve 'react-dom' in '/node_modules/#material-ui/core/esm/ButtonBase'
I tried to delete node_modules and ran npm install again, but the problem persists.
Can someone help me with this?
Just install react and react-dom
npm i react react-dom

Module not found: Can't resolve 'react'

I'm trying to connect my Redux store to my React project, but I keep getting this error:
../node_modules/react-redux/es/components/Provider.js Module not
found: Can't resolve 'react' in
'C:\Users.\Documents..\node_modules\react-redux\es\components'
I've installed both react-redux and redux (I believe react-redux has some dependencies on redux)
import { Provider} from 'react-redux';
This is what is giving the error.
Any suggestions on what I could do?
This could be caused by your node_modules
At the first delete your node_modules, package-lock.json, yarn.lock then install all dependencies again
like
rm -rf node_modules
rm -rf package-lock.json
rm -rf yarn.lock
then run
npm install
Please import react at top
import React from 'react'
I faced this issue and it seems you installed react-redux first and redux later.
I assume, react-redux is having some dependencies on redux, which might have created this error. So, recommending you to delete the package-lock.json , run npm install and then npm start.
Let me know if this works!
Thanks
I had same issue, Just run npm audit fix to fix the error

Why do I encounter: "TypeError: t(...).isPlaceholder is not a function" when "import './bootstrap/dist/css/bootstrap.min.css'"

I installed bootstrap via npm install already and i tried to import it to my App.js file:
import './bootstrap/dist/css/bootstrap.min.css'
But then the app return this on the browser:
TypeError: t(...).isPlaceholder is not a function
Could someone please explain why and how to fix?
Thank you
For me, I saw these errors when I bumped #babel dependencies a few minor versions (several packages and plugins).
What helped was removing the node_modules directory and then installing all the packages again.
Remove node_modules: rm -rf ./node_modules
Install packages yarn or npm i
Run your project again
I just encountered this error.
To fix it, make sure you're not mixing up your package managers. I was using yarn, but then used npm because that's what we use at work.
you should add or install your modules using the same package manager
For me it works with a standard create-react-app structure via:
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
For us, it's a yarn bug related to using yarn link with a messy lockfile. The solution was to use yarn-deduplicate.
Prior to finding that fix, my workaround was
yarn link other-repo from main-repo
yarn install from main-repo
yarn install --check-files from other-repo
Which can be done using an alias

Resources