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
Related
I deployed my react app to gh-pages and my images arent loading anymore. They are held in the public folder and I am loading the them using the react-three-fiber hook useLoader according to their documentation like this:
const [theImage, 2ndImage] = useLoader(TextureLoader, [
"/{folderName}/{the-image}.jpeg",
".../etc",
])
Also Ive tried directing to the image using process.env.PUBLIC_URL + "/{folderName}/{the-image}.jpeg"
Gh-pages documentation says best practice is to load the image with the relative path and not the absolute path. But still my page cant seem to access them.
My Console error reads:
Uncaught Error: Could not load /{myrepo}{folderName}/{the-image}.jpeg: undefined)
at index-6f0019d1.esm.js:1670:1
Ive seen other post on this issue like this one but I dont quite understand the answer marked as correct. Can anyone explain?
Any time I import Amplify into my React Native project's App.js file, I get the following error:
TypeError: null is not an object (evaluating 'keys.filter')
Here is how I'm importing it:
I run the project using Expo only. If I comment the import Amplify line out, any other files which use anything related to Amplify cause the same error to occur.
Initially, when I was loading this project for the first time, I had other errors to deal with like first needing to create the aws-exports.js file. I copied this over from an old project (Because this is meant to be a re-do of another project that's already set up). Once I included that file I had to update a few lines in that file because of an improper reference to Linking from expo. Once I fixed that, it throw this error I'm referencing here. Now, even if I delete the aws-exports file it will throw this error as soon as Amplify is imported into the App.js file.
-- Update
I've found where the error is occurring. Some of my code gets executed but the error happens inside of the reactnative.js file when syncing between two memory software.
I've tried to reproduce this error inside a fresh react application by copying the package.js file and then importing Amplify into the App.js file but it doesn't throw this error.
Here is a screenshot of where the error is taking place. I'm still trying to figure out how to pinpoint where in my code this error begins.
According to Expo, you have to follow these steps
it would be best if you imported Amplify
import Amplify from '#aws-amplify/core'
All you need to follow those steps it sees the configuration issue result data is not coming that's why it gives a null value and crashes.
Follow steps below will fix your problem
https://blog.expo.dev/how-to-build-cloud-powered-mobile-apps-with-expo-aws-amplify-2fddc898f9a2
The problem seems to be resolved by changing the slug attribute in the react app.json file. I changed the slug from being a camel case to an all lower case slug.
After this the error has gone away for what seems permanent. I've been able to replicate the error in small sample apps. I don't understand why this causes these errors.
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'm trying to use React-Leaflet-Draw to add polygons to a mapping project I'm working on. Coming unstuck on the use of EditControls.
I imported Edit control as per the example
import { EditControl } from '../src';
With an index.js file in src folder with:
export EditControl from './EditControl';
I added some code to do some different things to the example but it still ran fine (in the example version).
When I tried to run this on another project, using the same code I get the error:
Syntax error: Unexpected token, expected {
From the index.js file, using the same export command. Has anyone else encountered this problem? Any thoughts on why it might be happening?
Thanks
You need to install 'leaflet-draw'
npm install 'leaflet-draw'
I am developing a mobile app with React native and trying to use firebase as a database. Yesterday I tried to upgrade my React native version from 0.37 to 0.40 but some files conflicted and my app didnt start. So I reverted to version 0.37. ( I copy pasted conflicted files with my earliest copies to solve this)
Now, when I copy paste firebase code snippet to my App.js file to setup firebase, I get an error "Cannot read property 'getItem' of undefined"
If I remove firebase snippet everything works fine. Otherwise after 1-2 seconds red screen pops up with the error on attachments.
I am suspecting, I broke something on the way to reverting react native 0.37. I tried to uninstall and reinstall firebase with no avail. Now I am beating my head and any help would be greatly appreaciated.
I found a solution to my problem. It seems that problem is not with firebase but its because of chrome debugger. Having the 'device toggle toolbar' (CMD SHIFT M) enabled in chrome seems to be causing the problem. De-selecting 'device toggle toolbar' and reloading the emulator gets rid of the error.
Check the image link for sample please.