NextJS styled-components 在捆绑文件中给出错误

Question

我在我的 React 项目中使用 styled-components。在我将我的 react 应用程序与 rollupjs 捆绑在一起之后，我尝试将此捆绑包与 NextJS 一起使用。 NextJS 出现错误：

ReferenceError: window is not defined

当我在捆绑文件中查看错误行时，此错误发生在样式组件内部。

这是我在 React App（不是 Nextjs）中的 rollup.config.js：

import babel from "rollup-plugin-babel";
import commonjs from "@rollup/plugin-commonjs";
import external from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import resolve from "@rollup/plugin-node-resolve";
import image from "@rollup/plugin-image";
import visualizer from "rollup-plugin-visualizer";
import pkg from "./package.json";

// PostCSS plugins
import simplevars from "postcss-simple-vars";
import nested from "postcss-nested";
import cssnext from "postcss-cssnext";
import cssnano from "cssnano";
import cssvariables from "postcss-css-variables";

const extensions = [".js", ".jsx", ".ts", ".tsx"];

export default {
  input: ["./src/index.js"],
  output: [
    {
      file: pkg.main,
      format: "cjs",
      globals: { react: "React" },
    },
    {
      file: pkg.module,
      format: "esm",
    },
  ],
  plugins: [
    external(["react", "uikit"]),
    postcss({
      plugins: [
        simplevars(),
        cssvariables(),
        nested(),
        cssnext({ warnForDuplicates: false }),
        cssnano(),
      ],
      extensions: [".css"],
    }),
    babel({
      exclude: "node_modules/**",
      extensions,
    }),
    // Allows node_modules resolution
    resolve({
      mainFields: ["module", "main", "jsnext:main", "browser"],
      dedupe: ["react", "react-dom"], // Default: []
      extensions,
    }),
    commonjs(),
    image(),
    visualizer(),
  ],
};

如何使用捆绑代码解决 NextJS 中的此错误？

谢谢

Answer 1

这意味着您的window 相关代码是在Node.js 端执行的，而不是在浏览器上。由于 Next.js 是服务器端渲染框架，因此您应该确保在服务器端执行的代码中不要使用浏览器的东西（如 window 对象）。 请参考this article。

更新

请检查您的.babelrc -

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}