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
Related
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.
I have the issue ./src/index.js Module not found: Can't resolve '~ antd / dist / antd.css', I can not fix it.
I tried to put the #import '~ antd / dist / antd.css'; . In css file.
Without success.
package.json:
{
"name": "time-clock",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.5.0",
"antd": "^4.9.2",
"firebase": "^8.1.2",
"polished": "^4.0.5",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"styled-components": "^5.2.1",
"web-vitals": "^0.2.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"
]
}
}
#import '~antd/dist/antd.css';
is only meant for css or scss files.
if you started your app with -> npx create-react-app yourAppName
don't import 'antd/dist/antd.css'; into your index.js it will fail !!!
Solution
DO NOT USE THE GET STARTED DOCS
Instead use the Use in create-react-app found here
Add #import '~antd/dist/antd.css'; to the top of App.css file
Then you should be able to use it on any component like import { Button } from 'antd';
Add in App.js
import 'antd/dist/reset.css';
documentation
I created a new React App and npm start was working in localhost. After I closed it and went back later npm start will not open in the browser. I reinstalled everything and the exact same thing happened again. I tried installing react-scripts globally. Nope. Same thing. I deleted node_modules and still nothing. I tried removing babel from my package.json. Nothing. I cleared my cache from the browser. Nothing. Any help would be great. I have made many React Apps and never had anything like this.
Here is my package.json:
{
"name": "johnny_auth1_app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.1",
"styled-components": "^5.2.1",
"web-vitals": "^0.2.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"
]
}
}
Here is my App.js:
import './App.css';
import Home from './Components/Home';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { NavigationBar } from './Components/NavigationBar';
const App = () => {
return (
<Router>
<NavigationBar />
<div classname='App'>
<Switch>
<Route exact path='/' component={Home}/>
</Switch>
</div>
</Router>
);
};```
This issue may be from the browser you are using. Copy the local host address and past it on different browsers. You may also need to restart your PC if you recently did some installations on the PC.
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
I am trying to create a table component but cant import TableContainer Component from material-ui:
Attempted import error: 'TableContainer' is not exported from '#material-ui/core'.
I require it at the top of the page like this:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import { TableRow, TableHead, TableContainer, TableCell, TableBody, Table, Paper } from '#material-ui/core';
And here is my package.json and i tried npm install && npm update too.
{
"name": "link_validator",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.8.0",
"#material-ui/icons": "^4.5.1",
"#material-ui/styles": "^4.7.1",
"#material/button": "^4.0.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-scripts": "^3.3.0",
"redux": "^4.0.4",
"styled-components": "^4.4.1",
"typescript": "^3.7.4"
},
"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"
]
}
}
As #AtinSingh suggested i tried npm uninstall and installing again with writing latest to package.json + importing without destructuring, it worked.
I run npm i #material-ui/core --save and fix my problem. My version now is 4.9.9