1

I am using styled-components for my React project. After I bundled my react application with rollupjs then I am trying to use this bundle with NextJS. It is getting error in NextJS:

ReferenceError: window is not defined

When I look line of error in the bundle file this error is happening inside of styled-components.

Here is my rollup.config.js in React App (not Nextjs):

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(),
  ],
};

How can I solve this error in NextJS with bundle code?

Thanks

tcetin
  • 979
  • 1
  • 21
  • 48
  • Can you clarify what you mean by "After I bundled my react application with rollupjs then I am trying to use this bundle with NextJS"? Are you trying to use a library you own on another Next.js project? – juliomalves Dec 26 '20 at 19:02
  • Yes it is correct. I use react bundle for NextJS app in node_modules as a nodejs package. – tcetin Dec 26 '20 at 19:37
  • Without having access to your React library it's difficult to say what's causing the issue exactly. However, it does sound like you're trying to use the library on the server-side somehow, where `window` does not exist. – juliomalves Dec 26 '20 at 21:27

1 Answers1

0

It means your window related code is executed on the Node.js side, not on the browser. Since Next.js is server-side rendering framework, you should make sure that you don't use browser thing (like window object) in the code that is executed on the server side. Please reference this article.

UPDATE

Please check your .babelrc -

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}
Thunderbolt Engineer
  • 1,524
  • 7
  • 12
  • Thank you I know this but I didn't use window global in my react components. It used in styled-components package. – tcetin Dec 26 '20 at 18:07
  • It is in styled-components node package.You can try to use after bundle. It is not in my react components. (https://www.npmjs.com/package/styled-components). It is relevant with this npm package. – tcetin Dec 26 '20 at 18:10
  • @tcetin Could you check my updated answer? – Thunderbolt Engineer Dec 26 '20 at 18:12
  • I use styled-components package as "devDependency".I will try but can you explain your answer why it needs like this? – tcetin Dec 26 '20 at 18:17
  • Unfortunately it didn't help. It gives same error still – tcetin Dec 26 '20 at 18:19
  • I think you are mentioning same idea with this article: https://medium.com/swlh/server-side-rendering-styled-components-with-nextjs-1db1353e915e. But I don't use styled-components in nextjs app. I use styled components in normal react application. So these are different react applications. – tcetin Dec 26 '20 at 18:25