How @uppy/golden-retriever integrate with Nextjs?

Uppy
1

I want to use @uppy/golden-retriever with nextjs for restore files when refreshing page

So, situation is

  1. I install next-pwa for adding service-worker in Nextjs environments
  2. In custom service-worker file, I require(’@uppy/golden-retriever’) for bundle @uppy/golden-retriever
  3. In _documnet.js, Make uppy instance and add GoldenRetriever option({serviceWorker: true}) to uppy
  4. also, I register @uppy/goldenretriever 's service-worker

Problem is

Error occured - can’t find localStorage and IndexedDB

why those Errors occur?

How can I solve it?(for integrating nextjs and @uppy/golden-retriever)

2

I’m not sure if this applies, but usually, when using a technology that uses server-side rendering, localStorage is not available. I can assume the same for IndexedDB. If you are using SSR, then Golden Retriever is most likely unable to access localStorage. If you aren’t, then I would be happy to further look into.

Assuming that SSR is the problem, to resolve this issue, you have a few options:

  1. You could disable SSR in your _document.js. But this means that nothing on your site will be server-side rendered, which takes away the whole point of using NextJS, so it isn’t ideal
  2. You could create a new component which returns null, but loads the module and then disable SSR for that component
  3. You could lazy load @uppy/goldenretriever on mount with useEffect or componentDidMount in class components. This is the optimal solution as it doesn’t make you disable SSR for anything

The last is the solution that I’ll give an example for. If you’d like to use the first or second approach, look at this post

Here’s some code that should achieve this effect (I’m not 100% sure). Note that is this a separate component that your _document.js should import

import { useEffect } from 'react'

export default () => {
  useEffect(() => {
    import('@uppy/golden-retriever');
  }, []);
  return null;
}

This code should work, but let me know how it goes.

- Andrew