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"
}
Related
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"
},
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/
Doing Lynda - Building and Deploying a Full-Stack React Application tutorial, and get stuck at a point, get following error:
./src/index.js
Error: [BABEL] /Users/kukodajanos/Workspace/ticket/src/index.js: The (relay-query) Babel 5 plugin is being run with an unsupported Babel version. (While processing: "/Users/kukodajanos/Workspace/ticket/node_modules/babel-plugin-react-relay/lib/index.js")
at Array.reduce (<anonymous>)
I tried suggestion written here: https://github.com/facebookarchive/relay-starter-kit/issues/74
npm i babel-relay-plugin#latest --save
It did not help, give same error.
Dependencies from package.json here:
"dependencies": {
"#babel/core": "7.5.5",
"#svgr/webpack": "4.3.2",
"#typescript-eslint/eslint-plugin": "1.13.0",
"#typescript-eslint/parser": "1.13.0",
"babel-eslint": "10.0.2",
"babel-jest": "^24.8.0",
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.3",
"babel-preset-react-app": "^9.0.1",
"babel-relay-plugin": "^0.11.0",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "4.2.0",
"eslint": "^6.1.0",
"eslint-config-react-app": "^5.0.1",
"eslint-loader": "2.2.1",
"eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.8.0",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.8.0",
"jest-watch-typeahead": "0.3.1",
"mini-css-extract-plugin": "0.5.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.5.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-app-polyfill": "^1.0.2",
"react-dev-utils": "^9.0.3",
"react-dom": "^16.9.0",
"react-router": "3.0.2",
"resolve": "1.12.0",
"resolve-url-loader": "3.1.0",
"sass-loader": "7.2.0",
"semver": "6.3.0",
"style-loader": "1.0.0",
"terser-webpack-plugin": "1.4.1",
"ts-pnp": "1.1.2",
"url-loader": "2.1.0",
"webpack": "4.39.1",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.3.1"
}
"devDependencies": {
"babel-plugin-react-relay": "^0.10.0"
}
I installed react native into my app. And now I can't start my app.
I show you code from a package.json, my code from component and error code. I tried to install react-native from npm but now I past something from react-native-app.
package.json:
"dependencies": {
"apollo-cache-inmemory": "^1.1.10",
"apollo-client": "^2.2.6",
"apollo-link-http": "^1.5.3",
"babel-polyfill": "^7.0.0-beta.2",
"bluebird": "^3.5.1",
"body-parser": "^1.18.2",
"bunyan": "^1.8.12",
"cookie-parser": "^1.4.3",
"core-js": "^2.5.1",
"express": "^4.16.1",
"express-jwt": "^5.3.0",
"graphql": "^0.11.7",
"graphql-tag": "^2.5.0",
"history": "^4.7.2",
"htmlparser2": "^3.9.2",
"isomorphic-style-loader": "^4.0.0",
"json2csv-stream": "^0.1.4",
"jsonwebtoken": "^8.0.1",
"libphonenumber-js": "^0.4.38",
"moment": "^2.20.1",
"morgan": "^1.9.0",
"node-fetch": "^1.7.3",
"normalize.css": "^7.0.0",
"pretty-error": "^2.1.1",
"prop-types": "^15.6.0",
"query-string": "^5.0.0",
"react": "16.6.3",
"react-native": "0.57.8",
"react-apollo": "^2.0.4",
"react-awesome-modal": "^2.0.5",
"react-collapsible": "^2.0.3",
"react-dom": "^16.0.0",
"react-google-maps": "^9.4.5",
"react-loadable": "^5.5.0",
"react-scroll": "^1.5.5",
"react-scrollbar": "^0.5.4",
"react-textarea-autosize": "^5.2.1",
"serialize-javascript": "^1.3.0",
"source-map-support": "^0.5.0",
"universal-router": "^4.2.0",
"whatwg-fetch": "^2.0.3"
},
"devDependencies": {
"assets-webpack-plugin": "^3.5.1",
"autoprefixer": "^7.1.4",
...(babel)
"browser-sync": "^2.18.13",
"metro-react-native-babel-preset": "0.51.1",
"chokidar": "^1.7.0",
"css-loader": "^0.28.7",
"enzyme": "^3.1.0",
"eslint": "^4.8.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-config-prettier": "^2.6.0",
"eslint-import-resolver-node": "^0.3.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-css-modules": "^2.7.5",
"eslint-plugin-flowtype": "^2.38.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-react": "^7.4.0",
"file-loader": "^1.1.5",
"flow-bin": "^0.56.0",
"front-matter": "^2.2.0",
"glob": "^7.1.2",
"husky": "^0.14.3",
"identity-obj-proxy": "^3.0.0",
"jest": "^21.2.1",
"jscodeshift": "^0.3.32",
"lint-staged": "^4.2.3",
"markdown-it": "^8.4.0",
"mkdirp": "^0.5.1",
"null-loader": "^0.1.1",
"pixrem": "^4.0.1",
"pleeease-filters": "^4.0.0",
...(postcss)
"prettier": "^1.7.4",
"raw-loader": "^0.5.1",
"react-deep-force-update": "^2.1.1",
"react-dev-utils": "^4.1.0",
"react-error-overlay": "^2.0.2",
"react-test-renderer": "^16.0.0",
"rimraf": "^2.6.2",
"stylelint": "^8.1.1",
"stylelint-config-standard": "^17.0.0",
"stylelint-order": "^0.7.0",
"svg-url-loader": "^2.2.0",
"url-loader": "^0.6.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.19.1",
"webpack-node-externals": "^1.6.0"
},
code from component:
import { Dimensions } from 'react-native';
const deviceWidth = Number(Dimensions.get('window').width - 'px');
render() { ...
const slidesStyles =
deviceWidth >= 800
? {
width: `${100 * children.length / 3}%`,
transform: `translateX(${-1 *
index *
(100 / children.length / 3)}%)`,
}
: {
width: `${100 * children.length}%`,
transform: `translateX(${-1 * index * (100 / children.length)}%)`,
}; ...}
and error code (it's too big, but all errors link with it):
ERROR in ./node_modules/react-native/Libraries/react-native/react-native-implementation.js
Can you help me to start my app?
The issue looks like with node_modules folder. Try to delete your node_modules folder using command rm -rf node_modules and then run npm install and then run your app using react-native run-android or react-native run-ios
please help me to understand what is the problem
when I start npm start I have a error
_this.compiler.applyPluginsAsync is not a function
npm version is 6.4.1
node version is v 10.13.0
my package.json file
"devDependencies": {
"#types/enzyme": "^3.1.15",
"#types/enzyme-adapter-react-16": "^1.0.3",
"#types/jest": "^23.3.9",
"#types/node": "^10.12.9",
"#types/react": "^16.7.6",
"#types/react-dom": "^16.0.9",
"#types/react-intl": "^2.3.12",
"#types/react-redux": "^6.0.9",
"#types/react-router": "^4.4.1",
"#types/react-router-dom": "^4.3.1",
"#types/react-select": "^2.0.7",
"#types/react-table": "^6.7.16",
"#types/reactstrap": "^6.4.2",
"#types/redux": "^3.6.0",
"autoprefixer": "7.1.6",
"babel-jest": "^22.1.0",
"babel-loader": "^7.1.2",
"babel-preset-react-app": "^3.1.1",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.7",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "0.11.2",
"fork-ts-checker-webpack-plugin": "^0.2.10",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"json-server": "^0.14.0",
"node-sass": "^4.9.3",
"postcss-loader": "2.0.8",
"react-dev-utils": "^5.0.3",
"react-dropzone": "^5.1.1",
"redux-devtools-extension": "^2.13.5",
"resolve": "1.6.0",
"sass-loader": "^7.1.0",
"source-map-loader": "^0.2.4",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"ts-jest": "22.0.1",
"ts-loader": "^2.3.7",
"tsconfig-paths-webpack-plugin": "^2.0.0",
"tslint": "^5.7.0",
"tslint-config-prettier": "^1.16.0",
"tslint-react": "^3.2.0",
"typescript": "^3.1.6",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "0.6.2",
"webpack": "^4.26.0",
"webpack-dev-server": "^3.1.10",
"webpack-manifest-plugin": "1.3.2"
}
According to the official repo of fork-ts-checker-webpack-plugin, this was reported in this issue and fixed in version 0.6.1. Update that package and try again to see if it happens.