react-redux-firebase V3 issue - reactjs

I got error
Error: Context from react-redux not found. If you are using react-redux v6 a v3.. version of react-redux-firebase is required.
I try steps in reference documentation, I did upgrade react-redux-firebase to version 3.0.0-alpha.6, but it did not work, I try downgrade react-redux to 4.4.9 but the same problem is still exist;
My JSON file
{
"name": "clientpanel",
"version": "0.1.0",
"private": true,
"dependencies": {
"firebase": "^5.8.1",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-redux": "6.0.0",
"react-redux-firebase": "2.2.6",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.3",
"redux": "^4.0.1",
"redux-firestore": "^0.6.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
How to fix error?

Download v3 as following:
npm i --save react-redux-firebase#latest
Then you can refactor your code to work with v3 as written here in the docs: https://github.com/prescottprue/react-redux-firebase/tree/next
2- Or just use react-redux v5.1.1
npm i --save react-redux#^5.0.0

I run into the same error and some TypeErrors just like you.
I think if you are using latest versions of react-redux-firebase and redux-firestore
the changed the way of using their provider so you might want to use the ReactReduxFirebaseProvider imported from react-redux-firebase and wrap your App component inside it, instead of using the reactReduxFirebase in your createStore function.
you might wanna take a look at this solution:
https://stackoverflow.com/a/62537595/10763842

Related

Problem with yarn installation in react app initially coded in codesandbox

I initially coded my react app in codesandbox.io with repository on github. Recently I have cloned the repository to my device and runned in terminal: "yarn install" command. Looks like it installed all node_modules, but terminal throws me some comments which I actually don't know how to fix. Can You please look at it and suggest ?
This is how my package.json looks like:
{
"name": "trading-blog",
"version": "1.0.0",
"keywords": [
"typescript",
"react",
"starter"
],
"main": "src/index.tsx",
"dependencies": {
"#emotion/react": "11.10.5",
"#emotion/styled": "11.10.5",
"#mui/icons-material": "5.10.16",
"#mui/material": "5.10.17",
"#types/react-dom": "18.0.9",
"#types/react-router": "5.1.19",
"#types/react-router-dom": "5.3.3",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-router-dom": "6.5.0",
"react-scripts": "4.0.3"
},
"devDependencies": {
"#types/react": "18.0.25",
"#types/react-dom": "18.0.9",
"typescript": "4.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

Uncaught TypeError: Cannot read property 'hasOwnProperty' of undefined react-dom.production.min.js:760

I'm getting this error when I try to open my build project
by the way the project works fine in development mode.
Uncaught TypeError: Cannot read property 'hasOwnProperty' of undefined
at Object.<anonymous> (react-dom.production.min.js:760)
at m (bundle.js:1)
at Object.<anonymous> (index.js:34)
at m (bundle.js:1)
at Module.56 (main.2b9897ed.chunk.js:1)
at m (bundle.js:1)
at Object.36 (main.2b9897ed.chunk.js:1)
at m (bundle.js:1)
at l (bundle.js:1)
at Array.n (bundle.js:1)
Line 760 that generates the error.
Note that the variable aa is require("react");
var Tb = aa.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
Tb.hasOwnProperty("ReactCurrentDispatcher") || (Tb.ReactCurrentDispatcher = {
current: null
});
here is my package.json, as you notice I use the last version of React and React-Dom
{
"name": "xxxx",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-confirm-alert": "^2.4.1",
"react-dom": "^16.8.6",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.0",
"react-scripts": "2.1.8",
"redux": "^4.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"proxy": "http://localhost:3001",
"devDependencies": {
"datatables.net": "^1.10.19",
"jquery": "^3.4.0"
}
}
index.html generated by the build
https://pastebin.com/zUWitJH2
I had this problem, and spent two hours browsing the web.
Then I did a npm list | grep react and realized react and react-dom had a different version. The package.json only specify version ranges, but doesn't guarantee they run at the same version.
So what I did is npm rm react react-dom && npm i -s react react-dom.
Now they have the same version, and finally work together.

How to fix React app dependencies failing on AWS?

I recently deployed an app to AWS. Locally it's working okay with the dependencies I have installed. AWS installs the dependencies on the cloud (see here: https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/nodejs-platform-packagejson.html), so I don't have to install them and then upload them, so I know my node_modules isn't getting uploaded and having some issue.
Here's my package.json:
{
"name": "cookbook",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/icons": "^3.0.2",
"axios": "^0.18.0",
"material-ui": "^1.0.0-beta.47",
"material-ui-icons": "^1.0.0-beta.36",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-google-login": "^5.0.4",
"react-scripts": "2.1.8",
"ts-pnp": "^1.0.1",
"typescript": "^3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#material-ui/core": "^3.9.3"
}
}
The error I get is in regards to material-ui/core/styles. Then it proceeds to give me another ERROR saying:
Module not found: Can't resolve '#material-ui/core'
When I run npm start locally it's working okay. The only thing I can think of is peer dependencies...I had a heck of a time getting material-ui installed and it wouldn't install everything simply from npm install. I'm wondering if AWS is having the same problem? I had to try to install peer dependencies manually on my local machine. It gave me trouble for a while but I finally got everything installed I needed. I can't help but feel AWS might be having the same issue...any thoughts?
So I'm not sure what the issue was but I deleted my package.json and reinstalled all my packages from scratch using npm install --save on every package npm bugged me about when I tried to run my app. Here was my resulting package.json:
{
"name": "cookbook",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"dependencies": {
"#material-ui/core": "^3.9.3",
"#material-ui/icons": "^3.0.2",
"axios": "^0.18.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-google-login": "^5.0.4",
"react-scripts": "^2.1.8"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
There are some slight changes. Since I installed everything from scratch there ended up being some unnecessary packages that were removed. Also, I noticed that when re-installing the material packages were upgraded and not beta. I'm not sure why they were beta versions originally. I have a hunch maybe that had something to do with it.
If anyone has some actual insight into why the changes would have worked, I'd sure like to hear it. Thanks.

How can I prevent my React application from including Bootstrap in the bundle?

I'm new at React.JS and I have made some sample app to test it, in my site I've already have the call to bootstrap CDN so I don't need to call bootstrap again in my React APP, but when I run 'npm run build', in the output, bootstrap code is appended to the css file, how can I disable bootstrap in my project.
Thank you...
UPDATE:
This is my package.json file, I've already remove the call from this file, but it still appending bootstrap.
{
"name": "new-home",
"version": "0.1.0",
"private": true,
"homepage" : "home/newHome/build",
"dependencies": {
"#types/react-slick": "^0.23.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "1.1.5",
"react-slick": "^0.23.1",
"reactstrap": "^6.5.0",
"slick-carousel": "^1.8.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Solved,
In index.js I needed to remove the import call to bootstrap, in my case I removed but I recommend just comment it.
Thanks everyone...
If you have not Ejected(which isnt recommended for newer react users) than you may not be able to see it in your package.json file, but on eject you will see it in there.

Cannot read property 'string' of undefined

I got an error on my browser window "Cannot read property 'string' of undefined" when i import module (import { Button } from 'react-lightning-design-system'), even i am not using this module.
//package.json
{
"name": "demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"history": "^4.7.2",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-lightning-design-system": "^2.4.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2"
},
"devDependencies": {
"react-scripts": "1.0.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
Given that it's a PropTypes issue I'm guessing it's a React v15 vs React v16 issue (i.e. you're using one version of React, but that module requires the other version). Check the dependencies.
Probably gonna need some more info then just an out of context error message though
Using react-codemon, run on your project directory
jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js myapp/
This will resolve updating proptypes for your source code and any node modules.
Re-installing node modules will require running the command again it seems.

Resources