ReferenceError: document is not defined

[HasanHaghniya]

hello next community
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 ?

[kr8n3r]

:) same here see #14071

[HasanHaghniya]

@kr8n3r i don't think so see below

[jamesmosier]

Where are you using document within your UI components?

---

In order to use a component that references document or window, you'll have to wait for the client to render it. document/window is not available on the server or when this page is built (as this happens within the Node environment).

You could conditionally load this component by checking if typeof window !== 'undefined' then render the component.

You could also instead import this component using a dynamic import with srr: false as shown in the docs

[chineduogada]

Thanks, bro you're the best!

[f1am3d]

And what if I'm importing bootstrap and it uses document?

[vineetsharma7667]

thanks bro, its work for me.

[IsaqueCruzDev]

isso pode estar acontecer na utilização de bootstrap?

[HasanHaghniya]

@jamesmosier i do not use document or window anywhere, but when i build it webpack add some codes that includes document and window

also after reading #14071 , i have changed my component to

const Input = React.forwardRef((props, ref) => {
  return typeof window !== 'undefined' ? <>
     {props.label && <label className={styled.label}>{props.label}</label>}
         <input className={styled.input} {...props} ref={ref} />
          </>
   : null;
    )
}

and still get same error, whats the problem with F5? why it works well during first render?

[HasanHaghniya]

the problem was the style-loader that trying to inject styles by creating document.createElement, i removed styled-loader in production and use mini-css-extract-plugin instead

[tiagobbraga]

Hi.. You can post your complete code? I have the same problem, but I use monorepo.

[chlvbharath]

Thank you! Same issue(document is not defined) here and removing style-loader, installing mini-css-extract-plugin, necessary webpack.config changes in my react ui library fixed the issue with ui library build that nextjs is having when exporting.

[mrfzd]

Hi,
Did you manage to fix this issue without using mini-css-extract-plugin?
I've run into the same issue, tried every possible way in my webpack.config file to overcome this problem, but NextJS' isn't happy and I totally understand why it's bugging out and all that!

Hopefully, somebody could post a fix for this using style-loader, I mean I'm utilising css-modules and this is defeating the purpose of css-modules in my non-NextJS based library, I have loads of UI components where they have their own stylesheets and it would be crazy loading the entire stylesheet in one go!

[jimfilippou]

Also please take a look at your imports. Sometimes, auto-import makes mistakes.
For example, my import was import {router} from 'next/client' but it should be import { Router } from "next/router"
This was frustrating because the code was long enough for it to hide!

[alexedwardjones]

I'm trying to do something very similar to @Team-OF. Using mini-css-extract-plugin is a good solution but then I end up with a single css file and importing this css file includes the styles for all the components.

This would be crazy if I had a library of hundreds of components but only needed one of the components and its associated styles. Any thoughts?

[alexedwardjones]

I went down the route of defining each component as an entry point for webpack but that results in duplication per built component.

It goes from this...

dist/
   main.js // Exports Button and Header components
   main.css // Contains all of the css for the Button and Header components

... to ...

dist/
   Button.js
   Button.css
   Header.js // If the Header contains a Button this will also include all of the Button component JavaScript.
   Header.css // If the Header contains a Button this will also include all of the Button component CSS.

[benjiroArthur]

I am also facing the same issue, I get the error when I import bootstrap.js, without the bootstrap import, everything works fine.

[ETIM-PAUL]

useEffect(() => {
import("bootstrap/dist/js/bootstrap.js");
}, []);

//place the above code in _app.js file

[gavmck]

Also seeing this issue, none of these solutions seem acceptable from a performance perspective. The only think I could think of is to shift the transpiling/compiling over to next.js and just import the source instead.

[gavmck]

I flipped over to rollup and now it's fine 🤷

[justadamhopkins]

If anyone is still stuck on this issue with style-loader trying to access the document on SSR. i solved it by replacing it with this package https://www.npmjs.com/package/isomorphic-style-loader