'react-icons module causing next.js ReferenceError: document is not defined [duplicate]

So as the title said, I tried to use react-icons module but it causing reference error.
I installed the module with command yarn add react-icons. ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ Here's the details

wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 181 ms (249 modules)
ReferenceError: document is not defined
    at new StyleSheet (/node_modules/styled-jsx/dist/index/index.js:136:35)
    at new StyleSheetRegistry (pathToProject/node_modules/styled-jsx/dist/index/index.js:491:33)
    at Object.createStyleRegistry (pathToProject/node_modules/styled-jsx/dist/index/index.js:667:10)
    at Object.renderToHTML (pathToProject/node_modules/next/dist/server/render.js:364:46)
    at async doRender (pathToProject/node_modules/next/dist/server/base-server.js:879:38)
    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (pathToProject/node_modules/next/dist/server/base-server.js:979:28)
    at async pathToProject/node_modules/next/dist/server/response-cache.js:64:36
ReferenceError: document is not defined
    at new StyleSheet (pathToProject/node_modules/styled-jsx/dist/index/index.js:136:35)
    at new StyleSheetRegistry (pathToProject/node_modules/styled-jsx/dist/index/index.js:491:33)
    at Object.createStyleRegistry (pathToProject/node_modules/styled-jsx/dist/index/index.js:667:10)
    at Object.renderToHTML (pathToProject/node_modules/next/dist/server/render.js:364:46)
    at async doRender (pathToProject/node_modules/next/dist/server/base-server.js:879:38)
    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (pathToProject/node_modules/next/dist/server/base-server.js:979:28)
    at async pathToProject/node_modules/next/dist/server/response-cache.js:64:36
ReferenceError: document is not defined
    at new StyleSheet (pathToProject/node_modules/styled-jsx/dist/index/index.js:136:35)
    at new StyleSheetRegistry (pathToProject/node_modules/styled-jsx/dist/index/index.js:491:33)
    at Object.createStyleRegistry (pathToProject/node_modules/styled-jsx/dist/index/index.js:667:10)
    at Object.renderToHTML (pathToProject/node_modules/next/dist/server/render.js:364:46)
    at async doRender (pathToProject/node_modules/next/dist/server/base-server.js:879:38)
    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (pathToProject/node_modules/next/dist/server/base-server.js:979:28)
    at async pathToProject/node_modules/next/dist/server/response-cache.js:64:36
ReferenceError: document is not defined
    at new StyleSheet (pathToProject/node_modules/styled-jsx/dist/index/index.js:136:35)
    at new StyleSheetRegistry (pathToProject/node_modules/styled-jsx/dist/index/index.js:491:33)
    at Object.createStyleRegistry (pathToProject/node_modules/styled-jsx/dist/index/index.js:667:10)
    at Object.renderToHTML (pathToProject/node_modules/next/dist/server/render.js:364:46)
    at async doRender (pathToProject/node_modules/next/dist/server/base-server.js:879:38)
    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (pathToProject/node_modules/next/dist/server/base-server.js:979:28)
    at async pathToProject/node_modules/next/dist/server/response-cache.js:64:36
ReferenceError: document is not defined
    at new StyleSheet (pathToProject/node_modules/styled-jsx/dist/index/index.js:136:35)
    at new StyleSheetRegistry (pathToProject/node_modules/styled-jsx/dist/index/index.js:491:33)
    at Object.createStyleRegistry (pathToProject/node_modules/styled-jsx/dist/index/index.js:667:10)
    at Object.renderToHTML (pathToProject/node_modules/next/dist/server/render.js:364:46)
    at async doRender (pathToProject/node_modules/next/dist/server/base-server.js:879:38)
    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (pathToProject/node_modules/next/dist/server/base-server.js:979:28)
    at async pathToProject/node_modules/next/dist/server/response-cache.js:64:36
ReferenceError: document is not defined
    at new StyleSheet (pathToProject/node_modules/styled-jsx/dist/index/index.js:136:35)
    at new StyleSheetRegistry (pathToProject/node_modules/styled-jsx/dist/index/index.js:491:33)
    at Object.createStyleRegistry (pathToProject/node_modules/styled-jsx/dist/index/index.js:667:10)
    at Object.renderToHTML (pathToProject/node_modules/next/dist/server/render.js:364:46)
    at async doRender (pathToProject/node_modules/next/dist/server/base-server.js:879:38)
    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (pathToProject/node_modules/next/dist/server/base-server.js:979:28)
    at async pathToProject/node_modules/next/dist/server/response-cache.js:64:36
error - unhandledRejection: ReferenceError: document is not defined
error - unhandledRejection: ReferenceError: document is not defined
error - unhandledRejection: ReferenceError: document is not defined
error - unhandledRejection: ReferenceError: document is not defined
error - unhandledRejection: ReferenceError: document is not defined
error - unhandledRejection: ReferenceError: document is not defined
node.jsreactjsnext.jsyarnpkgreact-icons


Solution 1:[1]

Fixed the issue by disabling the Server Side Rendering.

import dynamic from "next/dynamic"

const SetupMavlink = dynamic(() => import("components/SetupMavlink"), {ssr:false})


export default function Home() {
  return (
    <div >
      <SetupMavlink />
    </div>
  )
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BlueBeret

Related Questions