SSR localStorage is not defined when using query.find()

[Vujovic]

export const getServerSideProps: GetServerSideProps = async ({ params }) => {
  const query = new Parse.Query('Job')
  query.find(params.id)

  return {
    props: {
      parseQuery: await encodeParseQuery(query),
    },
  }
}

Server Error
ReferenceError: localStorage is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.

[davimacedo]

Have you initialized the sdk with something like this? https://github.com/parse-community/parse-react/tree/master/packages/parse-react-ssr#getting-started-nextjs

[Vujovic]

Have you initialized the sdk with something like this? https://github.com/parse-community/parse-react/tree/master/packages/parse-react-ssr#getting-started-nextjs

Yes, I can also use methods like equalsTo and include just fine, but find throws this error.

[davimacedo]

What do you aim to do with this query.find(params.id) ?

[Vujovic]

Actually I messed the method up while trying this out. I want query.get(id) to retrieve a single object, but the error is the same.

[davimacedo]

Could you share the code that you are trying to run with the get function, the error stack and the line throwing the error?

[Vujovic]

Parse is initialized in app.tsx and working on pages with different queries(include, equalTo, etc). This is the page that is throwing the error:

import type {
  NextPage,
  GetServerSideProps,
  InferGetServerSidePropsType,
} from 'next'
import Parse from 'parse'
import { encodeParseQuery, useParseQuery } from '@parse/react-ssr'

import JobView from '../../components/jobView'

const Job: NextPage = ({
  parseQuery,
}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
  const { isLoading, results, error, reload } = useParseQuery(parseQuery, {
    enableLocalDatastore: false,
    enableLiveQuery: false,
  })

  return (
    <>
      <JobView loading={isLoading} job={results} />
    </>
  )
}

export const getServerSideProps: GetServerSideProps = async ({ params }) => {
  const query = new Parse.Query('Job')
  await query.get(params.id)

  return {
    props: {
      parseQuery: await encodeParseQuery(query),
    },
  }
}

export default Job

Uncaught ReferenceError: localStorage is not defined
    at Object.getItem (/usr/home/develm/jobino-frontend-next/node_modules/parse/lib/browser/StorageController.browser.js:23:5)
    at Object.getItemAsync (/usr/home/develm/jobino-frontend-next/node_modules/parse/lib/browser/Storage.js:52:48)
    at Object.currentInstallationId (/usr/home/develm/jobino-frontend-next/node_modules/parse/lib/browser/InstallationController.js:33:29)
    at Object.request (/usr/home/develm/jobino-frontend-next/node_modules/parse/lib/browser/RESTController.js:382:54)
    at Object.find (/usr/home/develm/jobino-frontend-next/node_modules/parse/lib/browser/ParseQuery.js:3049:27)
    at ParseQuery.value (/usr/home/develm/jobino-frontend-next/node_modules/parse/lib/browser/ParseQuery.js:1154:45)
    at ParseQuery.value (/usr/home/develm/jobino-frontend-next/node_modules/parse/lib/browser/ParseQuery.js:795:19)
    at getServerSideProps (webpack-internal:///./src/pages/job/[id].tsx:35:17)
    at Object.renderToHTML (/usr/home/develm/jobino-frontend-next/node_modules/next/dist/server/render.js:573:26)
    at async doRender (/usr/home/develm/jobino-frontend-next/node_modules/next/dist/server/base-server.js:915:38)

src/pages/job/[id].tsx (28:14) @ getServerSideProps

  26 | export const getServerSideProps: GetServerSideProps = async ({ params }) => {
  27 |   const query = new Parse.Query('Job')
> 28 |   await query.get(params.id)
     |              ^
  29 | 
  30 |   return {
  31 |     props: {

[davimacedo]

I'm still not sure what you aim to do with this line of code, but it might be related to the way you are importing Parse. Parse var should be available in global.Parse. Could you please try to remove the parse import? Otherwise you might want to do something like this: const isServer = typeof window === 'undefined';

if ((process as any).browser) {
  global.Parse = require('parse');
} else {
  global.Parse = require('parse/node');
}

On server side, you need to import from parse/node and not from parse.

Another point is the initialization, I'm not sure that app.tsx will run before the getServerSideProps. It might be a problem as well.

[Vujovic]

Yeah, removing the Parse import solved the issue. Thanks!