JS works fine in development, does not load on production build (blurry images, event handlers do not fire)

[bueide]

Description

I am experiencing an error that I suspect may be related to my use of ThemeProvider in @emotion/react. My site works in development but in the production build, all images queried with childImageSharp remain in the "blur up" mode (links to the images are data: links instead of links to the static files); and any elements that contain event handlers no longer work (theme toggle, dropdown menus).

The browser console logs the following errors:

TypeError: WeakMap key must be an object, got r
    Z      weak-memoize.browser.esm.js:11
    ke    emotion-element-4fbd89c5.browser.esm.js:63
    React 11
    UxWs      production-app.js:181
    setTimeout      handler*aHzY/t.exports</< ready.js:37
    UxWs      production-app.js:179
    promise callback*UxWs/<      production-app.js:153
    promise callback*UxWs      production-app.js:39
    Webpack 4
react-dom.production.min.js:209:194

There are also a few errors that state: DOMException: Node.removeChild: The node to be removed is not a child of this node.

This is not my day job, and this is my first Gatsby project, so forgive me if there is a painfully obvious solution. I've searched around and while I did find some issues in which people described similar problems loading images (#25783), nothing was quite on point or provided me with a working solution.

Steps to reproduce

On the production build, the image loads and the toggle button works until I add ThemeProvider from the @emotion/react package. Then it only works in development, but not production. Here is a minimal reproduction: https://github.com/bueide/gatsby-bug-reproduction. The reproduction uses the gatsby hello world starter with the following added dependencies:

"dependencies": {
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^11.1.5",
    "gatsby": "^2.26.1",
    "gatsby-image": "^2.11.0",
    "gatsby-plugin-emotion": "^5.4.0",
    "gatsby-plugin-sharp": "^2.14.1",
    "gatsby-source-filesystem": "^2.11.0",
    "gatsby-transformer-sharp": "^2.12.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "prettier": "^2.2.1"
  },

Expected result

The JS should still work on the production build (event handlers, images loading etc.).

Actual result

The site builds without throwing any errors, but the images do not load beyond the blur up placeholder image, and no event handlers work. The browser console logs the errors described above.

Environment

System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i3 CPU 550 @ 3.20GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 14.15.5 - /private/var/folders/tn/rbnq0r45463fzjptxz31xh9c0000gn/T/xfs-12200ac7/node
Yarn: 2.4.0 - /private/var/folders/tn/rbnq0r45463fzjptxz31xh9c0000gn/T/xfs-12200ac7/yarn
npm: 6.14.11 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Firefox: 85.0.1
npmGlobalPackages:
gatsby-cli: 2.19.1

[bueide]

Ok, I solved the problem. The issue was not with ThemeProvider; rather, it was with me wanting to pull a user's previous theme selection from localStorage. I thought I had solved that adding the typeof window !== 'undefined' && window.localStorage code, but what I did not realize was that the code, as I had written it, was returning a null value for the stored theme on the initial rendering of the site after it was built.

The added code on line 12 of the following screenshot fixed the problem (disregard the change inside the useEffect hook, that is irrelevant and a relic of me fiddling around). Sharing in case anybody else is dealing with the same issue and comes across this post.