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
Related
I'm probably missing something really obvious but I'm not very accustomed to GitHub or React so I'd love some advice.
My GitHub is here:
https://github.com/SarahACollins/PortfolioWebsite
I've tried publishing the website here:
https://sarahacollins.github.io/PortfolioWebsite/
and it just produces a blank page. I've tried several different ways of fixing (changing the homepage, moving the index.html to the front, etc.) but can't figure out what's wrong. Any help would be appreciated.
In the developer console it says:
Uncaught SyntaxError: Cannot use import statement outside a module. Looking at the location of the error shows that it is node.js code.:
import React from 'react';
You need to compile your react source code and create a .js file for the client from it.
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
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. :)
I've been having trouble getting react-pdf to work properly in my react app that I created using 'create-react-app'. From various github comments on the react-pdf page, it seems that there's an issue setting up the workerSrc in React applications that were created with 'create-react-app'.
One work around that seemed to solve the issue (temporarily) was to copy the pdf.worker.js file from the node-modules/build/pdfjs-dist/build folder and place it in the public folder of my react app. Then in my index.js file put the following code:
import {pdfjs} from 'react-pdf'
window.PDFJS.workerSrc = process.env.PUBLIC_URL + '/pdf.worker.js'
This worked just fine for a week, until I installed a new module into my application with npm. Now, I'm getting the same error I did in the beginning, and nothing has changed:
index.js:14 Uncaught TypeError: Cannot set property 'workerSrc' of undefined
These were the initial comments that helped me narrow down the error:
https://github.com/facebook/create-react-app/issues/1574#issuecomment-280436498
https://github.com/wojtekmaj/react-pdf/issues/291
but now that it's back I'm kind of at a loss for ideas. Has anyone else experienced this and been able to solve it? Any help would be greatly appreciated!
Based on what I have seen in the docs and in forums, it appears you should be altering the global PDFJS object.
PDFJS.workerSrc, instead of window.workerSrc.
I managed to get this working by loading the worker from CDN.
import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc=//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js
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.