ReferenceError: document is not defined when refresh nextjs page

Question

i am trying to create a simple UI library using react for Nextjs 9.4, here what i am doing

// input.js in React UI Lib

import React from "react";
import styled from "./input.module.scss";

const Input = React.forwardRef((props, ref) => (
  <>
    {props.label && <label className={styled.label}>{props.label}</label>}
    <input className={styled.input} {...props} ref={ref} />
  </>
));

export default Input;

and made an index to export all modules for simplicity

// app.js the index file for the lib

import PrimaryButton from "./components/button/primaryButton";
import TextInput from "./components/input/input";
import PasswordInput from "./components/passwordInput/password";
import CheckBox from "./components/checkbox/checkbox";

export {
  PrimaryButton,
  TextInput,
  PasswordInput,
  CheckBox
};

also here is my webpack config to build for SSR Next

const path = require("path");
const autoprefixer = require("autoprefixer");
const nodeExternals = require("webpack-node-externals");

const CSSLoader = {
  loader: "css-loader",
  options: {
    modules: "global",
    importLoaders: 2,
    sourceMap: false,
  },
};

const CSSModlueLoader = {
  loader: "css-loader",
  options: {
    modules: true,
    importLoaders: 2,
    sourceMap: false,
  },
};

const PostCSSLoader = {
  loader: "postcss-loader",
  options: {
    ident: "postcss",
    sourceMap: false,
    plugins: () => [autoprefixer()],
  },
};

const SassLoader = {
  loader: "sass-loader",
  options: {
    // Prefer `dart-sass`
    implementation: require("sass"),
  },
};

module.exports = {
  target: "node",
  entry: "./src/app.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    chunkFilename: "[id].js",
    publicPath: "",
    library: "",
    libraryTarget: "commonjs",
  },
  externals: [nodeExternals()],
  resolve: {
    extensions: [".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(sa|sc|c)ss$/i,
        exclude: [/node_modules/, /\.module\.(sa|sc|c)ss$/i],
        use: ["style-loader", CSSLoader, PostCSSLoader, SassLoader],
      },
      {
        test: /\.module\.(sa|sc|c)ss$/i,
        exclude: /node_modules/,
        use: ["style-loader", CSSModlueLoader, PostCSSLoader, SassLoader],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: "url-loader?limit=10000&name=img/[name].[ext]",
      },
    ],
  },
};

1-i build

2-publush on npm

3-import in Nextjs

then everything works well , but the problem is when i try to refresh (F5) the page during development i get the error

Unhandled Runtime Error
ReferenceError: document is not defined

how can i fix that ?

you have not access window || document during SSR so try to prevent rendering during this time like , typeof window !=== 'undefined' ? <Component /> : null — Hasan Haghniya
– Hasan Haghniya, Commented Jun 12, 2020 at 9:32
@Mashiro i have changed component to typeof window !== 'undefined' ? <> {props.label && <label className={styled.label}>{props.label}</label>} <input className={styled.input} {...props} ref={ref} /> </> : null, still same error — Jackson
– Jackson, Commented Jun 12, 2020 at 9:49

Hasan Haghniya · Accepted Answer · 2020-06-12 10:39:22Z

4

try to render component only in client side you can do with:

typeof window !== 'undefined' ? <Component /> : null
you are using style-loader in your webpack config, it will inject styles into head using document.createElement that is not availabe in SSR, you can choose other options like mini-css-extract-plugin

answered Jun 12, 2020 at 10:39

Hasan Haghniya

2,5714 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alentejo Over a year ago

typeof window !== 'undefined' && <Component /> works too

FM_Suhail · Accepted Answer · 2021-01-08 06:29:00Z

1

const Example = dynamic( () => import('example'), { ssr: false } )

https://github.com/elrumordelaluz/reactour/issues/130

answered Jan 8, 2021 at 6:29

FM_Suhail

91 bronze badge

Comments

score 1 · Accepted Answer · 2021-10-20 19:19:15Z

1

try to check component in client side rendering ex:

const isBrowser = typeof window !== 'undefined';
isBrowser ? <Component/> : null;

another option is try to render using ssr false:

const DynamicComponentWithNoSSR = dynamic(
() => import('../components/hello3'),
{ ssr: false }
)

Thanks..

edited Oct 20, 2021 at 19:19

answered Sep 30, 2021 at 12:21

user17001237

Comments

Partho · Accepted Answer · 2021-08-09 13:58:43Z

You may not always want to include a module on server-side. For example, when the module includes a library that only works in the browser.

Take a look at the following example:

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
() => import('../components/hello3'),
{ ssr: false }
)

function Home() {
return (
<div>
  <Header />
  <DynamicComponentWithNoSSR />
  <p>HOME PAGE is here!</p>
</div>
 )
}

export default Home

Collectives™ on Stack Overflow

ReferenceError: document is not defined when refresh nextjs page

4 Answers 4

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Related