create-react-app MaterialUI Error: Invalid hook call - reactjs

I want to do Create-react-app and use Material UI, but I get a Hooks Error.
Am I missing something else?
This is an error statement.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
I did the following.
$ npx create-react-app my-app --template typescript
$ npm install #mui/material
$ npm install #mui/icons-material
package.json
{
"name": "muitest",
"version": "0.1.0",
"private": true,
"dependencies": {
"#mui/icons-material": "^5.2.1",
"#mui/material": "^5.2.3",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#types/jest": "^26.0.24",
"#types/node": "^12.20.37",
"#types/react": "^17.0.37",
"#types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.5.2",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
App.tsx
import React from 'react';
import './App.css';
import GitHubIcon from '#mui/icons-material/GitHub';
function App() {
return (
<div className="App">
<GitHubIcon />
</div>
);
}
export default App;

https://create-react-app.dev/docs/adding-typescript/
https://github.com/mui-org/material-ui
please go through this both link, u need to add few packages then it will work.
npx create-react-app my-app --template typescript
npm install #mui/material #emotion/react #emotion/styled #types/material-ui
for typescript we need to install few package #types packages.

Related

Uncaught ReferenceError: process is not defined at ./node_modules/process-nextick-args/index.js

Here is my package.json:
{
"name": "new-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
"buffer": "^6.0.3",
"dotenv": "^16.0.3",
"guardian-wallet": "^0.0.6-rc.30",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"web-vitals": "^3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"preinstall": "npx npm-force-resolutions"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"react-error-overlay": "^6.0.11"
},
"resolutions": {
"//": "See https://github.com/facebook/create-react-app/issues/11773",
"react-error-overlay": "6.0.9"
}
}
My app.js :
import logo from './logo.svg';
import './App.css';
import GuardianWallet from "guardian-wallet";
I have tried many the solutions I came across nothing helped:
I have tried upgrade react-scripts to its latest version.
Tried npm install --save-dev react-error-overlay#6.0.9 --force.
Tried adding resolution.
Deleted node_modules and package.lock.json and then used npm cache clean --force and then
did npm install.
process is a Node.js global; process is not defined in a React application most likely means that you're trying to use an NPM package that was written for Node.js, not a browser environment.
Depending on your specific environment and needs, there are a few approaches you could take to fix it: You could replace the NPM package that you're using with one that's written for browsers, or submit a request or PR to add browser support to the NPM package you're using, or set up polyfills in your bundler (see, e.g., here).

npm start can't detect tsx file

I tried to create a react app and add typescript to it.
But when I run the app, it seems like npm start is not detecting the typescript file and not generating tsconfig.json automatically.
Here is what I did:
1. npx create-react-app my-app
2. cd my-app
3. npm install --save typescript #types/node #types/react #types/react-dom #types/jest
4. rename index and app to tsx file
4. npm start
The error I got:
Module not found: Error: Can't resolve './App' in
'C:\WebDev\threeJs\01-tutorial\src'
I assume it is because it's looking for App.jsx not App.tsx. But I'm not sure what is the reason for that.
Here is some warning I got when npm start:
DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option...
My npm version: 6.14.15
Here is my package.json file:
{
"name": "01-tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.4.0",
"#types/node": "^17.0.17",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.5.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I had the same error, I was in the root folder but my package.json file was a step ahead. I cd into the folder where my package.json file was and it worked for me.

Module not found: Can't resolve 'tsparticles' in '/home/manujtiwari/Desktop/portfolio-react/node_modules/react-particles-js/cjs'

I am unable to use react particles in my project.
Following the documentation, i installed react-particles,
and when it did not work, i installed react-tsparticles
but still it gives me same error:
Module not found: Can't resolve 'tsparticles'
Please Help me in this. Below is my dependency file.
{
"name": "portfolio-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"bootstrap": "^5.0.2",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "^17.0.2",
"react-particles-js": "^3.5.3",
"react-scripts": "4.0.3",
"react-tsparticles": "^1.30.4",
"react-typed": "^1.2.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"tslint": "^5.0.0"
}
}
When you install the npm i react-particles-js in your project. In the initial doc the develper mentioned the react-particles-js is dependant on "tsparticles" so you just install "npm i tsparticles".
npm i tsparticles
Nothing else and restart your server .I think this time its working fine.
Here is my Particle component.
import React from 'react'
import Particles from 'react-particles-js'
function Particless (){
return (
<Particles
params={{
particles: {
number: {
value: 200,
density: {
enable: true,
value_area: 1000,
}
},
},
}}
/>
)
}
export default Particless
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Uninstall "react-particles-js", because it's deprecated. Install "react-particles" instead.
npm install react-particles
In your Component:
import Particles from "react-particles";
try installing ts particles npm package
as this should fix the issue
here is what I did.
removed the node modules > removed the packagelock.json > npm i tsparticles
then it worked for me.
You have to must install npm package of ts particles because it depends on particles library.
npm i tsparticles (command for installing tsparticles)
After installing tsparticles you have to restart the server and the issue is resolved
upgrade npm package to latest version
$ yarn add react-particles-js#latest
# OR
$ npm i -S react-particles-js#latest
install dependency npm package
$ yarn add -D tsparticles#latest
# OR
$ npm i -D tsparticles#latest
refs
https://github.com/Wufe/react-particles-js/issues/191#issuecomment-953464323

Adding Chakra UI after starting development of Create React App

I'm getting an error after I tried adding ChakraUI to my create-react-app. Hoping for any help (also suggestions for what to add to a stackoverflow question is also appreciated)
I ran yarn add #chakra-ui/react #emotion/react#^11 #emotion/styled#^11 framer-motion#^4 as suggested in https://chakra-ui.com/docs/getting-started
I used CRA to start my app but decided to add chakra after I already started a bit of development. That's why I didn't use yarn create react-app my-app --template #chakra-ui
However after running yarn & yarn start I get this error about framer-motion:
TypeError: framer_motion__WEBPACK_IMPORTED_MODULE_1__.motion.custom is not a function
my index.js file looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { ChakraProvider } from '#chakra-ui/react';
ReactDOM.render(
<React.StrictMode>
<ChakraProvider>
<App />
</ChakraProvider>
</React.StrictMode>,
document.getElementById('root')
);
package.json:
{
"name": "gad-questionaire",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/react": "^1.3.4",
"#emotion/react": "^11",
"#emotion/styled": "^11",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"framer-motion": "^4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Using react version: 17.0.1
npm i framer-motion#3.10.6
👆 worked for me, 4.0 appears to have breaking changes

React default create-react-app App component rendered twice

I started new React project via the command:
npx create-react-app my-app --template typescript
Then, I changed the App component to look like that:
import * as React from 'react';
export default class App extends React.Component<{}> {
public render() {
console.log("App Rendered");
return (
<div>
Hello World
</div>
);
}
}
and when I watch the Console log ( both in Google Chrome and Microsoft Edge ) I receive this messages:
[HMR] Waiting for update signal from WDS...
App Rendered
App Rendered
My Questions:
Why the App render is being called twice?
How to remove the first message with that WDS?
This is my package.json ( default one as I ran create-react-app ):
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/jest": "^24.0.0",
"#types/node": "^12.0.0",
"#types/react": "^16.9.0",
"#types/react-dom": "^16.9.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"typescript": "~3.7.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
When wrapped with React.StrictMode (which is how CRA template are setup), on development, renders will be called twice. This is done to catch bugs that might occurs when some setState functions are not pure. You can read this for more detail.
Remove React.StrictMode from src/index.tsx

Resources