Just found out ugly bug on IPhone (chrome/safari) on first website load. Run via Browserstack and it logs this error to console:
TypeError: undefined is not an object (evaluating 't.cssRules'
Tried on multiple Iphones on Browserstack, and also on real Iphone devices, and the same error pops out (confirmed with chrome://inspect).
According to image posted above, it is related to react.dom.production.min.js.
Anyone had such issue? Really tried to find solution but nothing worked.
Here are installed packages:
"dependencies": {
"#emailjs/browser": "^3.10.0",
"#hookform/resolvers": "^2.9.10",
"#react-hook/resize-observer": "^1.2.6",
"animate.css": "^4.1.1",
"classnames": "^2.3.2",
"framer-motion": "^7.6.15",
"react": "^18.2.0",
"react-alice-carousel": "^2.6.4",
"react-background-video-player": "^1.1.8",
"react-burger-menu": "^3.0.8",
"react-cookie-consent": "^8.0.1",
"react-dom": "^18.2.0",
"react-external-link": "^2.0.0",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.40.0",
"react-intersection-observer": "^9.4.1",
"react-router-dom": "^6.3.0",
"react-router-sitemap": "^1.2.0",
"react-scripts": "5.0.1",
"react-scroll": "^1.8.7",
"react-slick": "^0.29.0",
"rfs": "^9.0.6",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.6",
"use-font-face-observer": "^1.2.1",
"yup": "^0.32.11"
},
"devDependencies": {
"#types/react": "^18.0.21",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^5.0.0",
"#typescript-eslint/parser": "^5.0.0",
"env-cmd": "^10.1.0",
"eslint": "^8.1.0",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"node-sass-chokidar": "^2.0.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.2.1",
"typescript": "3.8.3"
},
Related
Getting this error while running nextjs app on my local machine
package.json
{
"dependencies": {
"#chakra-ui/react": "^2.4.3",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#pinata/sdk": "^2.1.0",
"#rainbow-me/rainbowkit": "^0.6.1",
"antd": "^5.0.4",
"axios": "^1.0.0",
"draft-js": "^0.11.7",
"ethers": "^5.7.1",
"file-saver": "^2.0.5",
"formik": "^2.2.9",
"framer-motion": "^6.5.1",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"next": "13.1.1",
"react": "18.2.0",
"react-datepicker": "^4.8.0",
"react-dom": "18.2.0",
"react-icon": "^1.0.0",
"react-icons": "^4.4.0",
"react-lottie-player": "^1.5.0",
"react-select": "^5.7.0",
"react-toastify": "^9.0.8",
"styled-components": "^5.3.5",
"use-file-picker": "^1.5.1",
"uuid": "^9.0.0",
"uuidv4": "^6.2.13",
"wagmi": "^0.6.7",
"yup": "^0.32.11"
}
}
I deleted node_modules and lock file then tried again but still getting same error. I also tried uisng npm but got same error
Attempting to upgrade Next 11 to Next 12. When I bump the next dependency to the latest
npm i next#latest
The application compiles successfully in the terminal but when I launch the page I get the following error on screen.
Looking at the upgrade docs for Next doesn't show anything apparent to me that would cause this error just by switching from 11 to 12.
Any help would be appreciated.
Package.json
"dependencies": {
"#apollo/client": "3.5.10",
"#wordpress/url": "^3.1.1",
"#wpengine/headless": "^0.6.3",
"eslint-config-next": "^12.1.6",
"graphql": "^15.5.1",
"html-react-parser": "^1.2.7",
"next": "^12.1.6",
"next-transpile-modules": "^9.0.0",
"npm-run-all": "^4.1.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sass": "^1.32.5"
},
"devDependencies": {
"#graphql-codegen/cli": "^2.1.1",
"#graphql-codegen/typescript": "^2.1.0",
"#types/node": "^14.14.11",
"#types/react": "^17.0.0",
"#typescript-eslint/eslint-plugin": "^4.9.1",
"#typescript-eslint/parser": "^4.9.1",
"dotenv": "^10.0.0",
"eslint": "^7.15.0",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-prettier": "^7.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.2.0",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-simple-import-sort": "^6.0.1",
"eslint-plugin-use-encapsulation": "^1.0.0",
"husky": "^7.0.0",
"open-cli": "^6.0.1",
"prettier": "^2.5.1",
"rimraf": "^3.0.2",
"typescript": "^4.3.2",
"wait-on": "^5.2.1"
}
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
I have this error - can you tell me what is wrong? Maybe its the dependency ?
(0, _reactReduxFirebase.reactReduxFirebase) is not a function. (In '(0, _reactReduxFirebase.reactReduxFirebase)(_firebase.default, rrfConfig)', '(0, _reactReduxFirebase.reactReduxFirebase)' is undefined)
Here is my package.json. I'm pretty new to react. It's a boilerplate I found on github :
"dependencies": {
"#babel/plugin-transform-react-jsx-source": "^7.5.0",
"#expo/samples": "3.0.3",
"#expo/vector-icons": "^10.0.6",
"expo": "^35.0.0",
"firebase": "^7.2.0",
"lodash": "^4.17.15",
"native-base": "^2.13.8",
"react": "16.8.3",
"react-native": "^0.59.8",
"react-native-gesture-handler": "^1.4.1",
"react-navigation": "^4.0.10",
"react-redux": "^7.1.1",
"react-redux-firebase": "^3.0.2",
"recompose": "^0.30.0",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"babel-plugin-module-resolver": "^3.2.0",
"babel-preset-expo": "^5.0.0",
"babel-preset-react-native": "4.0.1",
"eslint": "^6.5.1",
"eslint-config-prettier": "^6.4.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^10.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.16.0",
"eslint-plugin-standard": "^4.0.1",
"husky": "^3.0.9",
"jest-expo": "33.0.0",
"prettier": "^1.18.2"
}
You're using react-redux-firebase version 3 and possibly you are initializing using version 2 method.
Please refer to v3 documents for proper initialization http://docs.react-redux-firebase.com/history/v3.0.0/
I created my app with dotnet new reactredux (2.0) some time ago, it uses webpack 2.5.3, I'm really keeen to update to more up to date version, however there are plenty of dependecies that don't support newer versions. Is there anybody who successfully did that?
dependecies that bother me a most:
aspnet-webpack
aspnet-webpack-react
seems discountinued
there my full project dependencies:
"devDependencies": {
"#types/history": "4.6.0",
"#types/jest": "^22.1.3",
"#types/react": "^16.3.13",
"#types/react-dom": "^16.0.4",
"#types/react-hot-loader": "3.0.3",
"#types/react-redux": "4.4.45",
"#types/react-router": "^4.0.23",
"#types/react-router-dom": "^4.2.5",
"#types/react-router-redux": "5.0.3",
"#types/webpack": "2.2.15",
"#types/webpack-env": "1.13.0",
"#types/fetch-mock": "^6.0.0",
"#types/enzyme": "^3.1.10",
"#types/enzyme-adapter-react-16": "^1.0.2",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"css-loader": "0.28.4",
"domain-task": "^3.0.3",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"foundation-sites": "^6.4.4-rc1",
"history": "4.6.3",
"jest": "22.4.2",
"jest-cli": "22.4.2",
"fetch-mock": "^6.0.1",
"jquery": "3.2.1",
"node-noop": "1.0.0",
"node-sass": "^4.7.2",
"react": "^16.3.2",
"react-dom": "^16.2.0",
"react-hot-loader": "3.0.0-beta.7",
"react-redux": "5.0.5",
"react-router-dom": "4.2.2",
"react-router-redux": "5.0.0-alpha.6",
"redux": "3.7.1",
"redux-thunk": "2.2.0",
"sass-loader": "^6.0.6",
"style-loader": "0.18.2",
"ts-jest": "22.0.4",
"ts-nameof": "^0.10.3",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"circular-dependency-plugin": "^4.4.0"