I'm using MUI for a react project and intellisense is giving me problems when it comes to speed. Suggestions won't show up for up to 4-5 seconds and I'm guessing MUI's massive library has something to do with it. Is there a way to disable intellisense for MUI specifically? If not, are there any more ways I can speed up intellisense?
package.json
"dependencies": {
"#emotion/react": "^11.5.0",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.0.5",
"#mui/material": "^5.0.6",
"#testing-library/jest-dom": "^5.15.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.24.0",
"chart.js": "^3.6.0",
"react": "^17.0.2",
"react-chartjs-2": "^3.3.0",
"react-dom": "^17.0.2",
"react-reveal": "^1.2.2",
"react-router": "^6.0.1",
"react-router-dom": "^6.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
}
Try importing directly from the component, rather than the whole library. I have found as long as no components are imported from the whole library, imports in a file are much faster.
You should import it like this
import Tab from '#mui/material/Tab';
instead of:
import {Tab} from '#mui/material';
They might look similar, but the second one is importing the whole library and then extracting the Tab component, instead of just getting the component at once. That should help with performance.
Maybe using this extension is useful.
Related
Currently I'm doing a React JS course but it seems a bit outdated with some things. Currently I'm trying to implement the React Router within my code. I'm getting the error:
ERROR in ./src/App.js 7:0-51
Module not found: Error: Can't resolve './react-router-dom'
Although when I checked my package.json and also the route of the dir under the node modules, it's there. I tried also to use a different version from the react-router-dom in order to make it work, I tried with other computers as well but it is not.
I tried to uninstall npm modules and reinstall them again.
Other options I've tried:
npm i react-router-dom
npm install react-router-dom#5.3.4 and 4.2.2
I'm addding some screenshots about where is it called, node modules and relevant info.
Here you have my JSON package file dependencies info:
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^4.6.0",
"bootstrap-social": "^5.1.1",
"font-awesome": "^4.7.0",
"node-modules": "^1.0.1",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-dom": "^18.2.0",
"react-popper": "^2.3.0",
"react-router-dom": "^5.3.4",
"react-scripts": "5.0.1",
"reactstrap": "^8.0.0",
"web-vitals": "^2.1.4"
When you add ./, you're telling React to look inside a path instead of calling the node module, you must remove ./ from the import sentence and use just react-router-dom instead.
Why i'm getting this error?
Warning: Using UNSAFE_componentWillMount in strict mode is not
recommended and may indicate bugs in your code. See
https://reactjs.org/link/unsafe-component-lifecycles for details.
Move code with side effects to componentDidMount, and set initial state in the constructor.
Please update the following components: SideEffect(NullComponent)
The app was working fine, went for few hours and came back found it giving me this error! one solution I found is removing I removed it and the error went away, but the api i'm using didn’t work, so i'm looking for another solution!
"dependencies": {
"#emotion/styled": "^11.10.4",
"#mui/icons-material": "^5.10.9",
"#mui/lab": "^5.0.0-alpha.103",
"#mui/material": "^5.10.9",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^1.1.2",
"font-awesome": "^4.7.0",
"gapi-script": "^1.2.0",
"html-react-parser": "^3.0.4",
"jwt-decode": "^3.1.2",
"react": "^18.2.0",
"react-cookie": "^4.1.1",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-router-dom": "^6.4.2",
"react-scripts": "^5.0.1",
"sanitize-html": "^2.7.2",
"web-vitals": "^2.1.4"
},
For API call use "componentDidMount"
If it not help then need to see your code snapshot in order understand what is going on.
I am trying to run the following code in older react version. I am getting errors like cant resolve reactdom/client. I tried to play around with index.js function, then started to get errors like expecting string in index.js line 7 (which is App/) but got obj, etc, etc
I need some hints on how to downgrade the code to React 16 as I am trying to merge with another package which has lots of code in React 16. Any hints, directions to make the code run old react version will be appreciated.
https://github.com/olawanlejoel/react-metamask-ether
below is my package.json dependencies
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"bootstrap": "^4.5.3",
"chart.js": "^2.9.4",
"ethers": "^5.0.18",
"react": "^16.14.0",
"react-chartjs-2": "^2.10.0",
"react-dom": "^16.14.0",
"react-scripts": "^5.0.1"
while the dependencies of the github code are newer versions
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"ethers": "^5.6.6",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
I have React application.
I updated Node.JS from v12 to v14 for reasons to use React v17.
And after that some tests stopped working.
When i run tests i got this error
In tests i have this part, it worked before update Node:
Part of my dependencies that i think important to show:
"#testing-library/jest-dom": "5.16.2",
"#testing-library/react": "12.1.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "5.0.0",
"pptxgenjs": "3.9.0",
Recently I started working on a commercial project that was written by another programmer basing on the create-react-app. Since the project is already big enough and does not stop developing, working with the create-react-app is becoming more and more inconvenient, because I want to be able to completely configure myself webpack, node.js and other packages.
I'm looking for an opportunity as quickly as possible to migrate the project from create-react-app to the form, as if the project was originally written without it.
To work with the code after npm run eject seemed to me unreasonably complex.
I am trying to find at least some instructions or guides on this issue but did not find it yet.
Here's the package.json dependencies:
{
"dependencies": {
"classnames": "^2.2.5",
"google-maps-react": "^2.0.2",
"history": "^4.7.2",
"husky": "^0.14.3",
"lint-staged": "^7.2.0",
"lodash.debounce": "^4.0.8",
"lodash.isequal": "^4.5.0",
"lodash.throttle": "^4.1.1",
"moment-timezone": "^0.5.17",
"prettier": "^1.12.1",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-collapse": "^4.0.3",
"react-copy-to-clipboard": "^5.0.1",
"react-dom": "^16.3.2",
"react-facebook-login": "^3.7.2",
"react-google-login": "^2.11.3",
"react-input-mask": "^1.2.2",
"react-motion": "^0.5.2",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.9",
"react-scripts": "1.1.4",
"react-scrollchor": "^4.2.1",
"react-slick": "^0.14.11",
"react-stripe-elements": "^1.6.0",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"validator": "^8.2.0"
},
"devDependencies": {
"eslint": "^5.3.0",
"eslint-config-airbnb": "^17.0.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-prettier": "^2.6.2",
"eslint-plugin-react": "^7.10.0",
"react-scrolllock": "^3.0.1",
"redux-devtools-extension": "^2.13.5",
"reselect": "^3.0.1",
"stylelint": "^9.4.0",
"stylelint-config-standard": "^18.2.0"
}
}
I'd say it depends what you want to do. I had the same problem. I ejected my local copy and found I got a lot of problems. My solution was the take the existing CRA project ad do the following:
Update to latest react and react-dom , run 'yarn react#next react-dom#next'
You should now have the latest react versions - so you can code split using React.lazy/React.Suspense, use hooks and so on.
If you have an issue with errors when using the import syntax you need to use the babel-plugin-syntax-dynamic-import plugin. Put the "babel" field in your package json.
I hope that is some help. There are also libraries like https://github.com/timarney/react-app-rewired but I haven't used them.