CustomEvent is not defined

[tnorlund]

Description

I can no longer access session storage. I wrote a separate hook for my header.

After updating to the newest Gatsby, Gatsby CLI version: 2.19.0, I can no longer build locally. Here's the repo. This is the error I keep getting:

success open and validate gatsby-configs - 0.066s
success load plugins - 0.946s
success onPreInit - 0.029s
success delete html and css files from previous builds - 0.003s
success initialize cache - 0.006s
success copy gatsby files - 0.042s
success onPreBootstrap - 0.018s
success createSchemaCustomization - 0.009s
success Checking for changed pages - 0.003s
success source and transform nodes - 3.512s
success building schema - 0.390s
info Total nodes: 244, SitePage nodes: 19 (use --verbose for breakdown)
success createPages - 0.051s
success Checking for changed pages - 0.001s
success createPagesStatefully - 0.081s
success update schema - 0.027s
success onPreExtractQueries - 0.004s
success extract queries from components - 0.412s
success write out redirect data - 0.004s
success Build manifest and related icons - 0.194s
success onPostBootstrap - 0.202s
info bootstrap finished - 8.843s
success run static queries - 0.585s - 9/9 15.38/s
success run page queries - 7.975s - 25/25 3.13/s
success write out requires - 0.005s
success Building production JavaScript and CSS bundles - 162.157s
success Rewriting compilation hashes - 0.005s
warn Error persisting state: function plugin({
  beginMarker,
  endMarker,
  pattyName = 'patty',
  onlyRunWithMarker = false,
  insertBef...<omitted>...
} could not be cloned.
warn Error persisting state: function plugin({
  beginMarker,
  endMarker,
  pattyName = 'patty',
  onlyRunWithMarker = false,
  insertBef...<omitted>...
} could not be cloned.
success Building HTML renderer - 63.944s
failed Building static HTML for pages - 1.622s

 ERROR #95313 

Building static HTML failed for path "/offline-plugin-app-shell-fallback/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  41 |     if ( newValue instanceof Function ) newValue = newValue( value )
  42 | 
> 43 |     const event = new CustomEvent( `storage:${key}Change`, {
     |                   ^
  44 |       detail: newValue,
  45 |     } )
  46 |     document.dispatchEvent( event )


  WebpackError: ReferenceError: CustomEvent is not defined
  
  - useStorage.js:43 
    src/hooks/useStorage.js:43:19
  
  - index.js:23 
    src/components/Header/index.js:23:43
  

not finished Generating image thumbnails - 241.035s

[ascorbic]

Hi,
The problem is that CustomEvent is a browser API, and isn't available in Node. You need to either polyfill it, or ensure it's not being called during SSR like you already are doing for localStorage