I am new to redux. I have experience with react context-api. This is my first time using redux. I have all the latest versions installed of redux, react-router, styled-components from their official websites. I have no idea what to do about this error. Please help me get out of this mess.
This is my Pakage.JSON as well as the error shown in localhost
This is where I used my component
This my index.js and appSlice.js
It's not a redux issue, but a react hook that is not used in the right place, I think we need more code to understand the problem
Related
I am very new to react and need to rebuild two Angular.js components within a .NET Content Management System (Kentico). I do not believe there is an opportunity to run a react app/component through npm so I have gone the other route and "add React to a website" (https://reactjs.org/docs/add-react-to-a-website.html). I'm using browserify with babelify to compile my app/component code for the browser.
I've made some decent progress but believe I like the flexibility functional components bring to the table where I don't find coding within a class component all that familiar. Because I'm "adding React to a site" instead of running it through npm, I BELIEVE I have no opportunity to import hooks and thus: no opportunity for useState within functional components.
Can anyone verify this for me? That indeed, "adding react to a site" precludes one from using functional components: class components are the best I can do?
I guess it boils down to: I do not believe I can import useState/useEffect when I am "adding react to a site" in a way where react and react-dom are just script references at the base of my component.
Maybe someone can verify that for me or else point out how I would capitalize on functional components/hooks?
You can use hooks and classes freely no matter how you include them. It's not relevant. The old react docs only use classes which is confusing. Try beta docs: https://beta.reactjs.org/
I have a Facebook base code for lead tracking installed in my React app. All I want to do is to add fbq('track', 'Lead'); to my "Thankyou.jsx" component.
All examples I have seen used NextJs but I'm writing just React and Redux.
How do I add fbq('track', 'Lead'); in the react component where I want it to reside?
I tried to search for that and I finally found one named react-facebook-pixel
So I need to update react, react-dom in order to update nextjs version to 11. React docs says that the new jsx transform approach is backwards compatible, though I met such problem after updating to react 17.0.2. Any file using jsx fails to compile with Can't resolve 'react/jsx-dev-runtime', no matter if I leave the import React from 'react', or remove it as intended after updating to react ^17.
I tried updating #babel/preset-react, using latest #babel/plugin-transform-react-jsx, same problem. The only thing I've found in a similar question topic here is adding /** #jsxRuntime classic */ to the top of the file, which obviously doesnt solve the problem for the whole application (perhaps there might be a way to make such directive global but even then - I would like to be able to use the new and more optimised jsx compiling)
Haven't been able to google exactly my case and any existing suggestions for similar cases didn't help.
To summarise - I need to either make my app work without importing react itself (https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) or at least to be able to use the old way of jsx compiling with this new react version.
Any thoughts?
This problem is killing me, but I keep getting this error when I compile and run (I am using .NET Core 3.0 with react app):
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
The error points to my ../src/index.js file:
Here is the error displayed
Here is the code that is flagged with the invalid hook call error
I'm not sure what's going on, i spent the past 3 hours trying to fix it but I just can't get the homepage to show.
I understand the hooks error, but I don't understand why its getting called.
I have the matching versions of React and React DOM, 16.13.1
For my react components, I use classes.
I'm not sure how to check for different copies of react
I'm quite new to React so maybe i misunderstood or messed up somewhere, please help me here, thank you.
EDIT:
Check if redux is installed on the client. This error occurs when it isn't installed on client directory but server directory.
check package.json of client.
Maybe a crazy solution but in my case nothing was actually wrong with my code. I was going nuts trying to find the error. But what actually helped, was upgrading the version of Typescript installed in my project from 4.4 to 4.9. Don't see any evident connection but after the upgrade everything worked like a charm. :)
Just added Redux to my app and it's saying it cant find my store. Is this a bug in React? I've worked with Vue2 and Angular2, but I'm a total noob when it comes to all things React.
Here's a screenshot of my structure and main js file...
Your reference is configStore, your file name is configureStore.js. Change them to match each other.