Run the library in server-side environment (Next.js)
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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