Build fails with Recoil: localstorage is not defined

[Notaduck]

Description

I'm trying to use recoil and recoil-persists with gatsby and everything works while running it with yarn develop but it fails while building the project with yarn build-

Steps to reproduce

I've made a sandbox with the code: https://codesandbox.io/s/idx7q

It is a simple starter which has some privateRoutes and then uses recoil/recoil-persist to manage the states.

gatsby-browser/gatsby-ssr ->

/**
 * Implement Gatsby's Browser APIs in this file.
 *
 * See: https://www.gatsbyjs.com/docs/browser-apis/
 */

// You can delete this file if you're not using it

import React from 'react'
import { RecoilRoot } from "recoil";
import recoilPersist from 'recoil-persist'

const { RecoilPersist, updateState } = recoilPersist(
    ['jwtTokenState'], // configurate that atoms will be stored (if empty then all atoms will be stored),
    {
        key: 'recoil-persist', // this key is using to store data in local storage
        storage: localStorage // configurate which stroage will be used to store the data
    }
)


export const wrapPageElement = ({element, props}) => {
    return(
        <RecoilRoot initializeState={({set}) => updateState({set})}>
            <RecoilPersist />
            {element}
        </RecoilRoot>
    )
}

gatsby-node ->

// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/app/)) {
    page.matchPath = "/app/*"

    // Update the page.
    createPage(page)
  }
}

Expected result

Just as yarn develop succeeds the build process should as well.

Actual result

failed Building static HTML for pages - 2.057s
error "localStorage" is not available during server side rendering.

  15 |     {
  16 |         key: 'recoil-persist', // this key is using to store data in local storage
> 17 |         storage: localStorage // configurate which stroage will be used to store the data
     |                  ^
  18 |     }
  19 | )
  20 |


  WebpackError: ReferenceError: localStorage is not defined

  - gatsby-ssr.js:17
    gatsby-ssr.js:17:18

  - utils.js:148
    node_modules/@reach/router/lib/utils.js:148:1

  - utils.js:168
    node_modules/@reach/router/lib/utils.js:168:1

  - utils.js:12
    node_modules/@reach/router/lib/utils.js:12:1

  - interopRequireWildcard.js:20
    node_modules/@babel/runtime/helpers/interopRequireWildcard.js:20:1

  - utils.js:52
    node_modules/@reach/router/lib/utils.js:52:1


error Command failed with exit code 1.

Environment

  System:
    OS: Linux 5.7 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.2.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Languages:
    Python: 3.8.6 - /usr/bin/python
  Browsers:
    Firefox: 82.0.3
  npmPackages:
    gatsby: ^2.25.3 => 2.25.3

[LekoArts]

As the error message says:

"localStorage" is not available during server side rendering.

You'll need to handle window/browser elements during SSR as they are not available in Node:

https://www.gatsbyjs.com/docs/debugging-html-builds/

[Notaduck]

Thanks for the fast reply @LekoArts

I tried to do as you suggested, gatsby-ssr ->

import React from 'react'
import { RecoilRoot } from "recoil";
import recoilPersist from 'recoil-persist'


const localStorage = typeof window !== `undefined` ? require("node-localstorage") : null

const { RecoilPersist, updateState } = recoilPersist(
    ['nameState'], // configurate that atoms will be stored (if empty then all atoms will be stored),
    {
        key: 'recoil-persist', // this key is using to store data in local storage
        storage: localStorage // configurate which stroage will be used to store the data, localStorage is default.
    }
)

export const wrapPageElement = ({element, props}) => {
    return(
        <RecoilRoot initializeState={({set}) => updateState({set})}>
            <RecoilPersist />
            {element}
        </RecoilRoot>
    )
}

However that still returns an error ->

error "localStorage" is not available during server side rendering.

  14 | export function recoilPersist(paths = [], config = {}) {
  15 |   const key = config.key || 'recoil-persist'
> 16 |   const storage = config.storage || localStorage
     | ^
  17 |
  18 |   function RecoilPersist() {
  19 |     useTransactionObservation_UNSTABLE(persistState)


  WebpackError: ReferenceError: localStorage is not defined

  - index.js:16
    node_modules/recoil-persist/index.js:16:1

  - gatsby-ssr.js:25
    gatsby-ssr.js:25:5

  - utils.js:143
    node_modules/@reach/router/lib/utils.js:143:1

  - utils.js:163
    node_modules/@reach/router/lib/utils.js:163:1

  - interopRequireWildcard.js:15
    node_modules/@babel/runtime/helpers/interopRequireWildcard.js:15:1

  - utils.js:47
    node_modules/@reach/router/lib/utils.js:47:1

[LekoArts]

I'm sadly not too familiar with Recoil so I can't comment on your usage of it. Have you read through articles like https://medium.com/swlh/how-to-use-recoil-js-library-in-gatsby-d5212f2cd623 ?

[Notaduck]

That was actually the guide I have tried to follow. However, you can only run it with develop and not build but I managed to get it working by implementing recoil-persist in the browser alongside with recoil and then only implement recoil in gatsby-ssr.

[ascorbic]

In your ternary you're using node-localstorage in the browser, but not in node. You probably want it the other way around. The node-localstorage docs have a good example of how to use it as a polyfill.

[Notaduck]

Thanks for the reply! I manged to solve this issue after all.

[DhillonN]

How did you solve it?

[Notaduck]

How did you solve it?

With recoil persist?

You should wrap the gatsby ssf file with recoil and then wrap gatsby-browser with recoil and recoil persist.