(0, _reactReduxFirebase.reactReduxFirebase) is not a function - reactjs

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/

Related

Upgrading Next11 to Next12

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"
}

Unexpected use of reserved word 'class' No stack

I'm trying to run a legacy react native app on my cellphone but I'm getting this strange error. I can't get any details or where on my code this problem exist.
I think it may be on some dependency. I'll put part of my package.json here:
{
"dependencies": {
"#react-native-community/async-storage": "^1.12.0",
"#react-native-community/clipboard": "^1.2.3",
"axios": "0.18.0",
"compare-versions": "^3.6.0",
"d3-geo": "1.11.6",
"formik": "1.5.1",
"geolib": "2.0.24",
"lodash": "4.17.11",
"moment": "2.24.0",
"native-base": "2.12.0",
"rbush": "^3.0.1",
"rbush-knn": "^2.1.0",
"react": "16.6.3",
"react-native": "0.58.5",
"react-native-animatable": "1.3.1",
"react-native-camera": "1.12.0",
"react-native-config": "1.3.3",
"react-native-event-listeners": "^1.0.3",
"react-native-fs": "2.13.3",
"react-native-geojson": "^0.1.1",
"react-native-geolocation-service": "2.0.0",
"react-native-gesture-handler": "1.0.16",
"react-native-head-less-js": "1.0.6",
"react-native-image-crop-picker": "0.22.0",
"react-native-image-resizer": "1.0.1",
"react-native-keychain": "^3.1.3",
"react-native-maps": "0.25.0",
"react-native-masked-text": "1.11.0",
"react-native-permissions": "1.1.1",
"react-native-qrcode-scanner": "1.1.2",
"react-native-splash-screen": "3.2.0",
"react-native-swiper-flatlist": "1.0.10",
"react-native-version-check": "^3.4.0",
"react-native-zip-archive": "4.0.0",
"react-navigation": "3.3.0",
"react-redux": "6.0.1",
"realm": "2.29.2",
"redux": "4.0.1",
"redux-saga": "1.0.1",
"reduxsauce": "1.0.1",
"rn-fetch-blob": "0.10.15",
"seamless-immutable": "7.1.4",
"styled-components": "4.1.3",
"supercluster": "4.1.1",
"unorm": "1.5.0",
"uuid": "3.3.2",
"yup": "0.26.10"
},
"devDependencies": {
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.1.0",
"babel-plugin-module-resolver": "^4.0.0",
"babel-plugin-transform-remove-console": "6.9.4",
"jest": "24.1.0",
"metro-react-native-babel-preset": "0.52.0",
"react-test-renderer": "16.6.3"
}
}
It is a legacy project so react native version is 0.58.5 and I'm using node version 10 to run.

MobX with React

I am new to MobX with React. So wanted to practice a bit. I created a project with Create React App. I have my package.json as
{
"dependencies": {
"#babel/core": "7.6.0",
"#svgr/webpack": "4.3.2",
"#typescript-eslint/eslint-plugin": "^2.2.0",
"#typescript-eslint/parser": "^2.2.0",
"axios": "^0.19.0",
"babel-eslint": "10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.4",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-react-app": "^9.0.2",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "5.1.0",
"eslint-config-react-app": "^5.0.2",
"eslint-loader": "3.0.2",
"eslint-plugin-flowtype": "3.13.0",
"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.9.0",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.0",
"mini-css-extract-plugin": "0.8.0",
"mobx": "^5.15.1",
"mobx-react": "^6.1.4",
"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.11.0",
"react-app-polyfill": "^1.0.4",
"react-dev-utils": "^9.1.0",
"react-dom": "^16.11.0",
"react-redux": "^7.1.3",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"redux": "^4.0.4",
"resolve": "1.12.0",
"resolve-url-loader": "3.1.0",
"sass-loader": "7.2.0",
"semver": "6.3.0",
"source-map-explorer": "^2.0.1",
"style-loader": "1.0.0",
"terser-webpack-plugin": "1.4.1",
"ts-pnp": "1.1.4",
"url-loader": "2.1.0",
"webpack": "4.41.0",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.1.1",
"workbox-webpack-plugin": "4.3.1"
},
"devDependencies": {
"eslint": "^6.7.2",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^1.7.0",
"flow-bin": "^0.111.3",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0"
},
"babel": {
"presets": [
"react-app"
],
"plugins": [
["transform-decorators-legacy", { "legacy": true, "decoratorsBeforeExport": false }]
]
}
}
But this is throwing me an error as below
I searched online. Everywhere it is showing to add the above options like legacy, decoratorsBeforeExport, but still no luck. I tried removing all the options, keeping one at a time and the above config also for babel plugins. Still, I am getting this issue.

Babel 5 plugin is being run with an unsupported Babel version. Tried to update babel-relay-plugin

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 have a error because install react-native into my app

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

Resources