PWA not loading when offline SharePoint SPFx and React - reactjs

We are trying to make an PWA which works offline. Until December last year it was working fine, we could load the app, go through the content, change pages.
Something happened and we are not able to load the app anymore and we have this error. We have tried a lot of things on the service worker and nothing has worked.
If someone knows how to solve this, please let us know.
Thanks
[SPLoaderError.loadComponentError]: Failed to load component "86682639-29f2-47cc-ac3f-cc259ef2959d" (AppWebPart). Original error: Manifest not found for component id "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d" and version "16.8.5".
INNERERROR: Manifest not found for component id "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d" and version "16.8.5". CALLSTACK: Error
at t [as constructor] (https://res-1.cdn.office.net/files/sp-client/sp-classic-page-assembly_en-us_b9f62e31470bfd5b13c16abbbd9a56b1.js:68:116110)
at new t (https://res-1.cdn.office.net/files/sp-client/sp-classic-page-assembly_en-us_b9f62e31470bfd5b13c16abbbd9a56b1.js:68:299482)
at e.buildErrorWithVerboseLog (https://res-1.cdn.office.net/files/sp-client/sp-classic-page-assembly_en-us_b9f62e31470bfd5b13c16abbbd9a56b1.js:68:336766)
at e.buildLoadComponentError (https://res-1.cdn.office.net/files/sp-client/sp-classic-page-assembly_en-us_b9f62e31470bfd5b13c16abbbd9a56b1.js:68:332857)
at https://res-1.cdn.office.net/files/sp-client/chunk.systemjs-component-loader_en-us_c9d296eaa8490acee6b3.js:1:6036
We have tried caching different links on the service-worker but they all got the same error.

Related

zlibWEBPACK_IMPORTED_MODULE_3.createDeflate is not a function while renderin react-pdf component

I'm using react pdf to render my component as PDF & allow user to download that PDF on button the PDF was working well after applying pollyfills changes but for my lead (who is using MAC) the PDF was not rendering and giving the
Error: react_devtools_backend.js:4026 TypeError: zlibWEBPACK_IMPORTED_MODULE_3.createDeflate is not a function
On deployment it's even works well on his system but locally he can't render it, does anyone have idea what issue that would which causing this things?
I tried to clone the repo in another folder & installed all the dependencies again but nothing works yet
Here's the screenshot of console error: https://cdn.discordapp.com/attachments/990645691531534370/1012846396296138833/Screen_Shot_2022-08-26_at_3.09.51_PM.png
I found the similar issue opened as well source: https://github.com/diegomura/react-pdf/issues/1935
But it's closed without any proper explanation

How can I debug a newly cloned React Native app

I am starting to help someone with a new project. This project is React (React Native as is a mobile app).
The project is working fine on her laptop (in her browser), and when I scan the Expo QR code, the app works fine on my Android device.
However, trying to run it in my browser is throwing all these errors:
The 'Can't resolve' error doesn't make sense, because the correct react native files are there. Is this a cache problem? I have tried deleting the .expo/web/cache folder and starting over.
Also, why are there multiple errors in my console, but only one being shown in the information on the actual web page? Does this mean that the single error being shown is causing all the other errors, or it is the only one which needs fixing, or will it show the next error when I fix the one that is being shown?
Thanks
Seems to have been a known problem re babel. See the links below:
https://github.com/babel/babel-loader/issues/173
how to solve this error You may need an appropriate loader to handle this file type

After Installing the module H5P I got the message and white screen - The website encountered an error, please try again later

After installing the module H5P, my site wouldn't load and only displayed "Error" The website encountered an error, please try again later
I had to manually disable the H5P modules in the database then clear the cache and a few minutes later the website started loading again. It also seems as if sub-domains couldn't load during this time.
Has anyone else experienced this?
After uninstalling and deleting the H5P module, it still shows on the page: admin/config/system/h5p but when the H5P link is clicked I get a Website encountered an error, please try again later error.
I can't seem to clear the cache via the site admin and I can't save panel pages. It says saved but when i try to access the page url, it says page not found.
Someone else said "I've had the same or similar issue. When I install, I just get a WSOD. I ended up using the missing module cleaner to get my site back to working normal after manually uninstalling it."
I've installed the module missing fixer module and when I enabled the module I got a "Website encountered an error, please try again later error." message but when I refresh the page, it shows the module is enabled.
However, when I click on "configure" from the module list page, it takes me to /admin/config/system with no option to configure the settings or actually use the module.
Should I be looking in the database for something that could fix this issue?
This issue was fixed by truncating every cache_ table in the database.

React app throwing errors when using 'react-pdf'

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

Firebase initial error with React Native (Cannot read property 'getItem' of undefined)

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.

Resources