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.
Related
I am trying to render my REACT components via SSR with REACTJS.NET in ASP.NET project.
In the JS file for SSR, I'm importing SimpleBar component from simplebar-react package.
This is causing the error TypeError: Object doesn't support property or method 'forwardRef'.
I currently have 2 JS files, one for server and one for client. In the JS for server I am removing the adding of event listeners and similar. However, I can't get away from importing at least the npm package in both JS files.
Any idea on how I can avoid such error?
I am using Webpack + REACTJS.NET version 3.2.0.
So, after trying a lot of things, this is the best solution I came across.
Before I begin, I am aware that conditional imports is being introduced in ECMA but it isn't working for me, or at least, they way I have the project setup.
Basically, my solution is resolved by mixing ES6 with CommonJS and with help of Webpack and babel.
In Webpack I am creating a plugin:
And in code, when I want to import the Simplebar react component, I do the following in the constructor:
And then, whenever I want to use my imported component, I do the following:
This was the best way I found in order to render with SSR. I think it's okay since the content between server and client side are the same.
Does anyone know a better solution? Or do you have concerns?
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
I have a component (a form) which is based on office ui fabric. The form is working fine in my react application. However, since we need this at multiple places, we decided to make it an npm package.
I extracted the component and can implement it in my app. I can fill out textfields and save and it works properly. However, as soon as I open a dropdown or datepicker (basically a "Callout" from office ui fabric), I get the following error message:
"Expected subtree parent to be a mounted class component. This error is likely caused by a bug in React. Please file an issue."
and:
"react-dom.development.js:14227 The above error occurred in the component:
in LayerBase
in CustomizedLayer
in StyledCustomizedLayer
in Callout
in div
in NormalPeoplePicker
[...]
"
Since it is working when I implement it within my app directly, it must be something in the build process I think. Can anybody eloberate, what this error message means exactly?
I am using the same package versions in my component as on my app.
Can I provide any files that might help? I don't know if showing my webpack.config or package.json for my component help at all?
Okay, it was indeed a mistake in my build process. I bundled the node_modules with my component and therefore suddenly hat two react "instances". After installing webpack-node-externals and adding
externals: [nodeExternals()]
to my webpack.config it works now.
I am developing a website with react and typescript and I want to include the Facebook customer chat plugin. I found this Node module https://github.com/Yoctol/react-messenger-customer-chat. Which seems like it would do the trick.
However there are no #types node module available for it. So I can't use it with typescript. I tried declaring my own d.ts declaration file however it's going over my head and I am unable to do so. Should I keep trying to learn how to create a d.ts declaration for it, if so how? Please point me to the right direction. Otherwise is there an alternative to include the customer chat plugin in a react app.
One Solution I Found: A simple //#tsignore by the import and then use it as normal
I'm using the google object (e.g. new google.maps.places.PlacesService()) in my React component. This is the component that I would like to test/optimize using Story book. In the story book config, I tried calling the googapis in the 'preview-head.html' as a script pointing to "https://maps.googleapis.com/maps/api/js?key=....
However, when the story book is loading/started, my react component is throwing an exception "ReferenceError: google is not defined". Seems, the above api is not calling properly.
Appreciate your kind help.
Thanks!
For anyone interested, here is the correct answer in the latest version (6.0):
https://storybook.js.org/docs/react/configure/story-rendering
Add the googlescripts tag to your head by including it in preview-head.html