`yarn start` command result in `Module not found` error - reactjs

I'm getting this error when run yarn start command:
Module not found: Can't resolve
'#babel/runtime/helpers/builtin/assertThisInitialized' in
'/home/new88/Desktop/javascript/the_venue/node_modules/#material-ui/core/ButtonBase'
Output in browser
Failed to compile
./node_modules/#material-ui/core/ButtonBase/TouchRipple.js
Module not found: Can't resolve
'#babel/runtime/helpers/builtin/assertThisInitialized' in
'/home/new88/Desktop/javascript/the_venue/node_modules/#material-ui/core/ButtonBase'
How can I fix this?

Quoting the comment from github -
The issue seems from the Babel runtime being split into two,
and breaking the Material UI.
I downgraded the babel runtime, with
npm install --save-exact #babel/runtime#7.0.0-beta.55
and it works now.

Related

Module not found: Can't resolve 'apexcharts/dist/apexcharts.common' apex chart module not found

Failed to compile
./node_modules/react-apexcharts/dist/react-apexcharts.min.js
Module not found: Can't resolve 'apexcharts/dist/apexcharts.common' in
'Z:\React\misc-examples\node_modules\react-apexcharts\dist'
This error occurred during the build time and cannot be dismissed.
by this command "npm install --save react-apexcharts apexcharts"
my problem solved.
yarn add --save react-apexcharts apexcharts

React.Js styled-components getting this error

ERROR in ./src/components/Login.js 4:0-39
Module not found: Error: Cannot find file:
'styled-components.browser.esm.js' does not match the corresponding
name on disk:
'.\node_modules\styled-Components\dist\styled-components'.
This looks like an installation problem. Run/type in command line
npm install --save styled-components
and then restart your app, by running npm start
If you use yarn, replace npm with yarn.
Let us know if the issue resolves!

React JS "npm start" shows failed to complile web-vitals

failed to compile -/src/reportWebVitals.js Module not found: Can't resolve 'web-vitals'.
Since new to react JS, could not find what happened. Here is the reportWebVitals.JS file. Thanks in advance for the help.
"/src/reportWebVitals.js Module not found: Can't resolve 'web-vitals' in 'E:\ReactResources\RectProjects\test-app\src'"`
In your Terminal stop the server (Ctrl+C) and run the following command:
npm i web-vitals --save-dev
Manually installing web-vitals worked for me.
I used the following command
yarn add web-vitals

React App Suddenly Failing To Compile - scss unable to import

App was compiling last night when running npm start. This morning it's throwing this error:
Failed to Compile
./src/components/HamButton/styles.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/components/HamButton/styles.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.
Running npm install node-sass didn't fix it.
If I comment out all scss imports, app will compile however styles are not applied.
What's causing this and how can I fix it?
Thanks
Node v10.15.3
npm v6.4.1
Apparently my npm install was corrupt so followed these steps: On npm install: Unhandled rejection Error: EACCES: permission denied
Then installed node-sass and it worked.

Webpack-hot-middleware/client module not found

So im getting this error in the terminal ERROR in multi ./client/src/index.js webpack-hot-middleware/client
Module not found
I am not sure why because in my project this file is there. I tried the npm install --save command but that didn't change anything. Any help appreciated
Try this steps
npm cache clean
npm i webpack-hot-middleware --save-dev

Resources