browser.js | The most reliable browser sniffing method

You need to install gatsby-plugin-offline first. Leaving your gatsby-config.js with something similar to:

window (and other global objects like document) are not available during the SSR (Server-Side Rendering) because this action is performed by the Node server (where for obvious reasons there's no window, yet) so you can't access directly to onload function. In addition, accessing these global objects outside the scope of React (without hooks) can potentially break React's hydration process.

That said, you have a few approaches:

• Using React hooks. Specifically, useEffect with empty dependencies ([]) fits your specifications, since the effect will be fired once the DOM tree is loaded (that's what empty deps means):

There is no addDepartment(val:any) function in your SharedService class, this is one of those cases where error messages point to exactly the right place.

You're calling this.service.addDepartment(val) in the addDepartment() method of the AddEditDepComponent

You need to install puppeteer with chromium inside the docker container. I've currently the exact same setup for Browsershot with Sail. You'll need to publish the sail config files which will allow you to edit the docker container.

Generally adding to prototypes of JS global constructors is a bad idea. There might be code in "WebAnimationStyleNormalizer" (not sure what that is anyways) that is doing something like for (const value in obj) and since obj is an object and inherits Object's prototype, suddenly your someMethodForObject is in that loop.

Take for example the following code

Have you tried the following snippet instead of your onServiceWorkerUpdateReady's function?

I guess that from your ProductDetail the src should be:

Finally got this working. In case anyone else is stuck on this, here's an explanation (apologies for the lack of brevity - probably this should be a blog post...).

To flesh out the use case a bit further, I'm using Uppy to allow users to upload files to an AWS S3 bucket. The way this works is that, when the user uploads a file, Uppy makes a call to my server where an AWS pre-signed URL is generated and passed back to the client. The client then uses that pre-signed URL to upload the file directly to the S3 bucket, bypassing the server, such that the file doesn't pass through the server at any point.

The problem I was attempting to solve was that files missing an extension ended up uploaded with the content / MIME type set as "application/octet", because it seems the browser, Uppy, and S3 all rely on the file extension to decide the file type (rather than parsing the so-called "magic bytes" of the file), and if the file extension is missing, AWS defaults to "application/octet". This causes issues when users attempt to open the file, as they are not handled correctly (i.e. a png file without an extension and with an "application/octet" content / MIME type opens a download dialog rather than being previewed, etc.). I also want to validate the MIME type / file type in cases even where the extension exists so that I can exclude certain types of files, and so the files get handled appropriately when they are later downloaded (where the MIME type will again be validated) if an incorrect file extension is used.

I use the "file-type" NPM module to determine the mimetype server side, and that's straight forward enough, but changing the file's content type / MIME type when generating the AWS pre-signed URL is not enough to fix the problem - it still gets uploaded as "application/octet". I wanted to use the same module client side so we get the exact same results on the client as on the server, and needed in any case to determine the MIME type and set it accordingly pre-upload but post-pre-signed URL. I had no idea how to do this (i.e. use "file-type" client side - the meat of my question).

I finally gave up on Webpack - nothing I tried worked. So I switched to Browserify, and the sample browser code at the "file-type" repository worked at once! So then I was left trying to figure out how to pass a function through Browserify to use in the client side code.

This proved impossible for me - I couldn't figure out how to pass the asynchronous IIFE through to my code. So instead, I moved my Uppy code into the code I pass to Browserify:

Most probably using this inside the callback that's defined as a plain JS function is running into scoping issues.

Try to define sortByTown() as an arrow function.