I am trying to use sass with react but its not working. The styles are not getting applied. I have used CRA. and I have also installed sass as per official docs of CRA. It works fine if I change scss to css.
I am mentioning the dependencies below
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-redux": "^8.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "0.9.5",
"redux": "^4.1.2",
"sass": "^1.50.0"
}
The issue was with react-scripts. Somehow CRA is currently shipping react-scripts version 0.9.5. Updating the react-scripts to latest version solved the issue.
Related
Conflict between
node_modules/react-native-router-flux/node_modules/react-native-gesture-handler
node_modules/react-native-gesture-handler
"react-native-gesture-handler": "^2.6.1",
"react-native-router-flux": "^4.3.1",
"react-native": "^0.70.0",
"react": "^18.1.0",
how can i solve this problem?
I googled lot about this issue.
But could not find this issue belongs to which library?
How to fix it?
any help will be appreciated
"resolutions" :{
"nth-check":"2.0.1"
}
Add it in Package.json then run npm install
This is a known issue, and it should not affect your actual app as it's coming from react-scripts package.
Open package.json. You will find this:
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3"
}
Take react-scripts and move it to devDependencies (if you don't have it, create it):
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"react-scripts": "4.0.3"
},
Then, ensure you run npm audit --production rather than npm audit.
You can read more from official sources:
https://github.com/facebook/create-react-app/issues/11174#issuecomment-979449264
I am trying to use react-icon FaStar in an app. I first created a component in a separate create-react-app and used FaStar successfully in that install. Then I transported the .js and .cs files to the create-react-app that I am developing.
After using npm install react-icon and I get
Attempted import error: 'FaStar' is not exported from 'react-icons/fa'.
When I look at node_modules/react-icon/fa/index.js all I see is
/ THIS FILE IS AUTO GENERATED
var GenIcon = require('../lib').GenIcon
In the installation where I developed the component, I see
Any idea why this is happening? Thanks
The solution for this problem was rebuilding the project create-react-app by installing react-icons before all the other dependencies. One must have been interfering(probably http-proxy-middleware) with react-icons install.
Here are the dependencies from package.json
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.22.0",
"http-proxy-middleware": "^2.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hot-loader": "^4.13.0",
"react-icons": "^4.3.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
I tried to update material ui following the instructions on their web site
from 3.9.3 to the latest version.
I ran npm install #material-ui/core and npm install react#latest
but I am getting the following error when I deploy my app:
hoist-non-react-statics.cjs.js:70 Uncaught TypeError: Cannot convert undefined or null to object
at getPrototypeOf (<anonymous>)
at e (hoist-non-react-statics.cjs.js:70)
at n (withTheme.js:47)
at Module.1038 (AppSettings.js:95)
at u (index.html:1)
at Object.620 (main.5ef97776.chunk.js:1)
at u (index.html:1)
at r (index.html:1)
at Array.t [as push] (index.html:1)
at main.5ef97776.chunk.js:1
These are the dependencies in my app:
"dependencies": {
"#date-io/core": "^1.3.8",
"#date-io/moment": "^1.3.11",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^3.0.2",
"material-design-icons": "^3.0.1",
"material-ui-pickers": "^2.2.4",
"moment": "^2.24.0",
"react-app-polyfill": "^1.0.4",
"react-dates": "^16.7.1",
"react-dom": "^17.0.1",
"react-router-dom": "^4.3.1",
"react-scripts": "^3.3.0",
"react-select": "^3.0.8",
"core-js": "^2.6.12",
"flux": "^3.1.3",
"react": "^17.0.2",
},
Any help with this?
You need to update your package.json to use the latest version of Material-UI.
"dependencies": {
"#material-ui/core": "^4.0.0"
}
Replace version with the latest or desired version.
Run
npm install #material-ui/core
or
yarn add #material-ui/core
Follow this guide on the changes you have to make. Remember in open-source environments, upgrading a package from x.0.0 to y.0.0 is considered a major version upgrade and will contain breaking changes 99% of the time. Simply bump the version and do nothing will almost guarantee to break your code.
I had an error after installed "react-bootstrap-table".
├── react#15.4.1
└── UNMET PEER DEPENDENCY react-router#3.0.0
My package.json
"dependencies": {
"isomorphic-fetch": "^2.2.1",
"react": "^15.4.0",
"react-addons-linked-state-mixin": "^15.4.0",
"react-bootstrap": "^0.30.6",
"react-bootstrap-table": "^2.6.0",
"react-cookie": "^0.4.8",
"react-dom": "^15.4.0",
"react-redux": "^4.4.6",
"react-router": "^3.0.0",
"react-router-apply-middleware": "0.0.2",
"react-router-bootstrap": "^0.23.1",
"react-router-relative-links": "^0.1.0",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-promise-middleware": "^4.1.0",
"redux-thunk": "^2.1.0"
}
Thanks any help.
This blog post explains Peer Dependancies well!
https://nodejs.org/en/blog/npm/peer-dependencies/
There's one use case where this falls down, however: plugins. A plugin package is meant to be used with another "host" package, even though it does not always directly use the host package. Most plugins never actually depend on their host package. The solution to this was peer dependancy
In your case it seems that you don't actually need to install it since I dug through the react-bootstrap-table package's repo and found that react-router#3.0.0 is mentioned as a dev dependency and used in their example app.
So unless they bundle the example along with the package which is highly unlikely, you can ignore it.