Reactjs ReferenceError:刷新nextjs页面时未定义文档

我正在尝试使用react for Nextjs 9.4创建一个简单的UI库，下面是我要做的

// 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;

另外，这是我的网页配置，下一步为SSR构建

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构建

npm上的2-publush

3-在Nextjs中导入

然后一切正常，但问题是，当我在开发过程中尝试刷新（F5）页面时，会出现错误

Unhandled Runtime Error
ReferenceError: document is not defined

我怎样才能解决这个问题

尝试仅在客户端渲染组件，您可以使用：

---

窗口类型！='未定义的'？：空

您正在网页配置中使用

style loader

，它将使用

document.createElement

导入头部，但在SSR中不可用，您可以选择其他选项，如

---

您在SSR期间没有访问窗口| |文档，因此请尝试在这段时间内防止渲染，例如，

typeof window！='未定义的'？：null

@Mashiro我已将组件更改为

窗口类型！='未定义的'？{props.label&&{props.label}}:null

，仍然是同一个错误你能提供一个到捆绑文件的链接吗？我弄明白了为什么会发生这种情况检查答案

窗口的类型！='未定义的“&&

也适用

Unhandled Runtime Error
ReferenceError: document is not defined

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