since a couple of days I have a problem, where CRA does not inject SCSS changes anymore.
If I refresh the page manually, the SCSS code change is there and applied to my page.
If I change my JavaScript, the change is detected and the app hot reloads.
I was on the 3.0 version of react-scripts, and now I upgraded to the latest, 3.2.0.
Still, SCSS is not injected.
In case it's useful, here are the packages in my package.json file:
"dependencies": {
"#aspnet/signalr": "^1.1.4",
"#reach/router": "^1.2.1",
"axios": "^0.18.0",
"bcryptjs": "^2.4.3",
"css-vars-ponyfill": "^2.1.1",
"dayjs": "^1.8.14",
"dompurify": "^1.0.10",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.4",
"google-maps-react": "^2.0.2",
"html-to-draftjs": "^1.4.0",
"i18next": "^15.1.0",
"i18next-browser-languagedetector": "^3.0.1",
"i18next-xhr-backend": "^2.0.1",
"interweave": "^11.1.0",
"node-sass": "^4.13.0",
"prop-types": "^15.7.2",
"pubnub": "^4.25.2",
"react": "^16.8.6",
"react-anchor-link-smooth-scroll": "^1.0.12",
"react-app-polyfill": "^1.0.1",
"react-dom": "^16.8.6",
"react-draft-wysiwyg": "^1.13.2",
"react-dropzone": "^10.1.5",
"react-ga": "^2.5.7",
"react-google-maps": "^9.4.5",
"react-i18next": "^10.9.0",
"react-image-crop": "^8.2.0",
"react-modal": "^3.8.1",
"react-redux": "^7.0.3",
"react-scripts": "3.2.0",
"react-scroll-up": "^1.3.3",
"react-tooltip": "^3.10.0",
"react-twitter-embed": "^2.0.8",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"uniqid": "^5.0.3"
},
}
Does anybody have any idea what might have caused it, or what I might try in order to troubleshoot the issue?
edit: I have noticed that when I save a scss file, a hot-update.js file is added to the DOM. this file contains my css changes, but they do not take effect.
so the issue seemed to be related to the fact that i was injecting some code in the head of the document (for the favicons) just before the app was loaded, following a fetch on a server containing the favicon urls.
Removing this fixed the HMR. Thanks for your help
Related
So I need to integrate android 12 support in my application but little confused if the react native 0.61 support the API level 31 (android 12) support.
I have looked into multiple sources but didn't got any answer for this it seems nobody is getting the same issue means there is a solution.
"dependencies": {
"#babel/runtime": "^7.1.2",
"#mapbox/mapbox-sdk": "^0.4.1",
"#mapbox/react-native-mapbox-gl": "https://github.com/nitaliano/react-native-mapbox-gl/tarball/master",
"#react-native-community/async-storage": "^1.6.1",
"#react-native-community/blur": "^3.6.0",
"#react-native-community/cameraroll": "^1.4.0",
"#react-native-community/cli-platform-android": "^3.0.3",
"#react-native-community/datetimepicker": "^3.0.9",
"#react-native-community/google-signin": "^3.0.4",
"#react-native-community/netinfo": "^4.2.2",
"#react-native-community/push-notification-ios": "^1.4.1",
"#react-native-firebase/app": "^8.4.3",
"#react-native-firebase/messaging": "^7.8.4",
"#turf/bbox": "^6.0.1",
"#turf/bbox-polygon": "^6.0.1",
"#turf/bearing": "^6.0.1",
"#turf/circle": "^6.0.1",
"#turf/distance": "^6.0.1",
"#turf/helpers": "^6.1.4",
"#turf/transform-rotate": "^5.1.5",
"axios": "^0.18.0",
"native-base": "^2.11.0",
"react": "16.9.0",
"react-native": "0.61.0",
"react-native-animatable": "^1.3.0",
"react-native-background-fetch": "^3.1.0",
"react-native-background-geolocation": "^3.9.3",
"react-native-background-timer": "^2.4.1",
"react-native-contacts": "^7.0.0",
"react-native-device-info": "^3.1.4",
"react-native-drag-sort": "^2.0.3",
"react-native-draggable-flatlist": "^1.1.7",
"react-native-fbsdk": "^1.1.1",
"react-native-fit-image": "1.5.5",
"react-native-floating-action": "^1.14.2",
"react-native-geolocation-service": "^3.1.0",
"react-native-image-crop-picker": "^0.26.1",
"react-native-image-viewing": "^0.2.2",
"react-native-linear-gradient": "^2.5.6",
"react-native-loading-spinner-overlay": "^1.0.1",
"react-native-md5": "^1.0.0",
...
> package.json file for the libraries I am using.
> any solution or questions will be appreciated.
No react-native 0.61 will not support Android 12 because of the default gradle configuration. Which you can change, but its better if you just upgrade. So go ahead and upgrade to <=0.66
I want to import table container for my react application. but I can't use it because of my material ui version error.
How i update my version to latest version. I suppose that it's the solution for that error.
I have already tried npm uninstall and npm uninstall, but didn't solve yet. Help me.
{
"name": "material-dashboard-react",
"version": "1.6.0",
"description": "Material Dashboard React. Coded by Creative Tim",
"private": false,
"main": "dist/index.js",
"dependencies": {
"#khanacademy/react-multi-select": "^0.3.3",
"#lls/react-light-calendar": "^2.0.7",
"#material-ui/core": "^3.9.4",
"#material-ui/icons": "3.0.2",
"#progress/kendo-react-dropdowns": "^3.4.1",
"#progress/kendo-react-intl": "^3.4.1",
"animate.css": "^3.7.2",
"axios": "^0.19.1",
"bootstrap": "^4.3.1",
"chartist": "0.10.1",
"classnames": "2.2.6",
"firebase": "^7.0.0",
"history": "4.7.2",
"jquery": "^1.9.1",
"material-ui-next-responsive-table": "^0.5.1",
"multi-select-react": "^0.1.8",
"multiselect-dropdown-react": "^1.0.5",
"multiselect-react-dropdown": "^1.2.4",
"perfect-scrollbar": "1.4.0",
"prettier": "1.16.4",
"prop-types": "15.7.1",
"react": "^16.8.1",
"react-bootstrap": "^1.0.0-beta.12",
"react-bootstrap-dialog": "^0.13.0",
"react-bootstrap-modal": "^4.2.0",
"react-chartist": "0.13.3",
"react-confirm-alert": "^2.4.1",
"react-datepicker": "^2.9.6",
"react-devtools": "^4.4.0",
"react-dialog": "^1.0.2",
"react-dom": "16.8.1",
"react-dropdown": "^1.6.4",
"react-dropdown-multiselect": "^1.0.0",
"react-dropdown-tree-select": "^2.1.1",
"react-google-maps": "9.4.5",
"react-light-calendar": "^1.0.3",
"react-multiple-select-dropdown": "^2.0.0",
"react-multiselect-checkboxes": "^0.1.1",
"react-notification-alert": "0.0.12",
"react-notifications": "^1.4.3",
"react-notifications-component": "^2.1.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.5",
"react-select": "^3.0.8",
"react-swipeable-views": "0.13.1",
"react-table-container": "^2.0.3",
"react-toastify": "^5.4.0",
#material-ui/core version ^3.9.4 doesn't have <TableContainer>
so you need to update #materia-ui/core version
latest version v4.9.2, so please update version and try
1) Go to package.json file in your project root.
2) Locate #material-ui/core in dependencies. Currently, you will see it as "#material-ui/core": "^3.9.4".
3) Now edit the version number. For example, "#material-ui/core": "^4.9.2".
4) Run npm install.
That's it!
You can follow this procedure for any dependency when you want to change the version. But make sure that those versions are compatible with each other dependencies (if any).
Good luck!
We have a Node back-end en react front-end application hosted on Heroku.
On the Heroku Server we get some pages with the error message. React works fine on the localhost.
We tried a different "react scripts": "3.1.2" and "react scripts": "3.2.0." we were on version 3.0.1.
The error=
Error message
Our react package.json file.
"dependencies": {
"#material-ui/core": "^3.9.2",
"#material-ui/icons": "^3.0.2",
"#material-ui/styles": "^4.4.1",
"#types/googlemaps": "3.30.16",
"#types/markerclustererplus": "2.1.33",
"ajv": "6.9.1",
"animate.css": "3.7.0",
"axios": "^0.18.1",
"classnames": "2.2.6",
"history": "4.7.2",
"http-proxy-middleware": "^0.19.0",
"moment": "2.24.0",
"node-sass": "^4.11.0",
"nouislider": "13.1.0",
"prop-types": "15.7.1",
"react": "16.8.1",
"react-animate-on-scroll": "2.1.5",
"react-datetime": "2.16.3",
"react-dom": "16.8.1",
"react-ga": "^2.5.7",
"react-google-maps": "9.4.5",
"react-helmet": "^5.2.1",
"react-image-gallery": "0.8.12",
"react-redux": "^6.0.0",
"react-router-dom": "4.3.1",
"react-scripts": "3.1.2",
"react-slick": "0.23.2",
"react-swipeable-views": "0.13.1",
"react-table": "^6.9.2",
"react-tagsinput": "3.19.0",
"redux": "^4.0.1",
"redux-form": "^8.1.0",
"redux-thunk": "^2.3.0",
"typescript": "^3.5.3"
Error solved. The problem was with the "react-table": "^6.9.2", see:
https://github.com/tannerlinsley/react-table/issues/1686
Here's a gif of it:
http://www.giphy.com/gifs/3oKIP7arhKhNzNzytq
As you can see, whenever I click on it, it doesn't select.
Here's my exact code which is working in webpack:
https://www.webpackbin.com/bins/-KoaaPYxDno695fiUBMn
But in my starter kit environment, it doesn't seem to work. However, checkboxes seem to work. Any ideas?
"react": "^15.5.4",
"react-dom": "^15.5.4",
"material-ui": "^0.18.6",
EDIT: I also have react-tap-event-plugin and I've called it at the top of my client.js file. Also tried on the top of my Location.js file.
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
Here's my full dependency list:
dependencies": {
"apisauce": "^0.14.0",
"babel-polyfill": "^6.23.0",
"bluebird": "^3.5.0",
"body-parser": "^1.17.2",
"classnames": "^2.2.5",
"cookie-parser": "^1.4.3",
"core-js": "^2.4.1",
"express": "^4.15.3",
"express-graphql": "^0.6.6",
"express-jwt": "^5.3.0",
"graphql": "^0.10.3",
"history": "^4.6.3",
"isomorphic-style-loader": "^2.0.0",
"jsonwebtoken": "^7.4.1",
"material-ui": "^0.18.6",
"node-fetch": "^1.7.1",
"normalize.css": "^7.0.0",
"passport": "^0.3.2",
"passport-facebook": "^2.1.1",
"pretty-error": "^2.1.1",
"prop-types": "^15.5.10",
"query-string": "^4.3.4",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-tap-event-plugin": "^2.0.1",
"sequelize": "^4.2.1",
"serialize-javascript": "^1.3.0",
"source-map-support": "^0.4.15",
"sqlite3": "^3.1.8",
"universal-router": "^3.2.0",
"whatwg-fetch": "^2.0.3"
},
You are most probably missing the react-tap-event-plugin.
Add it with npm install -save react-tap-event-plugin
I strugged with this problem for couple of days and found a solution. See if it works for you
Why was it not working?
If you look closely at the backend code of RadioButton you'll realize that it is actually similar to the Checkbox. I realized the problem was not only with RadioButtons but the checkbox was also not working (while the toggles were working fine).
I took my source code and ran it using CRA (Create React App) and it the RadioButtons were working perfectly. For RSK (React Starter Kit) the first suspect which was different was BrowserSync. I dug a little deeper and found that there is a config in BrowserSync for Ghost clicks which was to be turned off. You can read more about it here
https://github.com/callemall/material-ui/issues/2983
To turn off Ghost mode in your start script, goto /tools/start.js in your RSK Project folder and change config to
browserSync.create().init(
{
// https://www.browsersync.io/docs/options
server: 'src/server.js',
ghostMode: false,
middleware: [server],
open: !process.argv.includes('--silent'),
...(isDebug ? {} : { notify: false, ui: false }),
},
(error, bs) => (error ? reject(error) : resolve(bs)),
),
I have developed a React Application in which below mentioned modules I have used.
"babel-runtime": "^5.1.10",
"core-js": "^0.9.6",
"flux": "^2.0.1",
"fs": "0.0.2",
"griddle-react": "^0.2.13",
"humps": "0.0.1",
"invariant": "^2.0.0",
"joi": "^6.5.0",
"keymirror": "^0.1.1",
"material-ui": "^0.9.0",
"moment": "^2.10.6",
"normalizr": "^0.1.2",
"react": "^0.13.3",
"react-bootstrap": "^0.23.1",
"react-bootstrap-datetimepicker": "0.0.18",
"react-bootstrap-table": "^0.9.7",
"react-color-picker": "^2.1.6",
"react-data-components": "^0.4.0",
"react-datepicker": "^0.11.4",
"react-day-picker": "^1.0.1",
"react-dnd": "^1.1.1",
"react-document-title": "^1.0.0",
"react-flex-layout": "^0.9.2",
"react-intl": "^1.2.0",
"react-pure-render": "^1.0.1",
"react-router": "^0.13.3",
"react-select": "^0.6.3",
"react-spinner": "^0.2.1",
"react-validation-mixin": "^4.1.0",
"selectn": "^0.9.6",
"underscore": "^1.8.2",
"validator": "^3.40.1",
"webpack": "^1.11.0",
"whatwg-fetch": "^0.7.0",
"xml2js": "^0.4.12"
Now I want to upgrade React 0.13.3 to 0.14 I know facebook has already released the document but I am not clear about it if I will update the react with 0.14 then what about dependencies how new react version is applicable to dependencies modules how I can upgrade dependencies as well.please guide me.
You could run a regex over your node_modules folder package.json files after running npm update.
Since we know that ^version means "Compatible with version" the regex would be "react": "^0.14.0" to check what packages are compatible with React 0.14.0.
If you're on an Unix based OS, one (untested) way would be:
grep -ER --include="**/package.json" "\"react\": \"\^0\.14\.0\"" project_root_path/node_modules