rollup / rollup/rollup

Run the library in server-side environment (Next.js)

Open
#5,041 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
26.3k
Forks
1.8k
Avg merge
2d 11h
Merged PRs (30d)
20

Description

Hello, I have a problem using my library (packed by rollup) in my Next/React application, I have this error :
ReferenceError: window is not defined

Call Stack
eval
webpack-internal:///../library/lib/cjs/index.js (23014:15)

And the code in that line is :
var browser = window.DOMPurify || (window.DOMPurify = requirePurify().default || requirePurify());

it's due to Next.js is trying to server-side render my library but can't find the "window" reference, here is my rollup config file, how can I make it rendable in next.js :

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import json from "@rollup/plugin-json";
import postcss from "rollup-plugin-postcss";
import terser from '@rollup/plugin-terser';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

const packageJson = require("./package.json");

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve({
        browser: true
      }),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      json(),
      postcss(),
      terser()
    ],
  },
  {
    input: "lib/esm/types/index.d.ts",
    output: [
      {
        file: 'lib/index.d.ts',
        format: 'esm',
      }
    ],
    plugins: [dts()],
    external: ['react', 'react-dom', /\.css$/]
  },
];

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the supplied Rollup configuration and the generated lib/cjs/index.js at line 23014, then reproduce the ReferenceError during Next.js server-side rendering. Trace which bundled dependency accesses window and determine the supported change needed for server-side use. Done means the reported Next.js SSR case no longer fails and the behavior is covered by a reproducible check.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, next.js, react, typescript
Domain
build-system, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.