{"id":13337,"library":"interweave-ssr","title":"Interweave SSR","description":"Interweave SSR (Server-Side Rendering) is a utility package designed to enable the Interweave React component library to function correctly in Node.js environments. It addresses the common issue in SSR setups where browser-specific global objects like `document` and `window` are absent, causing runtime errors for libraries that expect them. This package, currently at version 2.0.0, provides a simple `polyfill()` function that simulates the necessary DOM APIs within the Node.js context, allowing `Interweave` components to render without errors during the server-side generation phase. Its release cadence is closely tied to the main `Interweave` library, ensuring compatibility. It differentiates itself by offering a targeted polyfill solution specifically for `Interweave`, rather than a broad, potentially over-engineered, general-purpose DOM emulation library. It is crucial for applications using `Interweave` that require universal rendering capabilities.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/milesj/interweave","tags":["javascript","interweave","react","ssr","typescript"],"install":[{"cmd":"npm install interweave-ssr","lang":"bash","label":"npm"},{"cmd":"yarn add interweave-ssr","lang":"bash","label":"yarn"},{"cmd":"pnpm add interweave-ssr","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the core Interweave React components that this package enables for server-side rendering. While not a direct package.json dependency of `interweave-ssr`, it is a functional prerequisite for `interweave-ssr`'s purpose.","package":"interweave","optional":true}],"imports":[{"note":"The library primarily uses ESM `import` syntax. While CommonJS `require` might work with transpilation or specific Node.js loader configurations, `import` is the idiomatic way to use it.","wrong":"const { polyfill } = require('interweave-ssr');","symbol":"polyfill","correct":"import { polyfill } from 'interweave-ssr';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOMServer from 'react-dom/server';\nimport { polyfill } from 'interweave-ssr';\nimport { Interweave } from 'interweave'; // Assumes interweave is installed\n\n// IMPORTANT: Call polyfill() at the entry point of your SSR bundle\n// before any Interweave components are rendered.\npolyfill();\n\nconst htmlContent = '
\n \n`);","lang":"typescript","description":"This quickstart demonstrates how to use `interweave-ssr` to enable server-side rendering of an `Interweave` component within a basic React application. It shows the essential `polyfill()` call before rendering."},"warnings":[{"fix":"Ensure `import { polyfill } from 'interweave-ssr'; polyfill();` is placed at the top of your SSR bundle's entry point.","message":"The `polyfill()` function must be called *once* at the very beginning of your server-side rendering process, typically in your SSR entry file, before any `Interweave` components are initialized or rendered. Failing to do so will result in `ReferenceError`s due to missing DOM globals.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade Node.js to a supported version (>=12.17.0). If using CommonJS, consider transitioning to ESM or using a bundler like Webpack/Rollup with Babel to transpile `interweave-ssr`.","message":"Version 2.0.0 primarily targets modern Node.js environments (>=12.17.0) and assumes an ES module setup. Older Node.js versions or strict CommonJS environments might require additional transpilation or module resolution configuration if `SyntaxError: Cannot use import statement outside a module` occurs.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Verify that the `Interweave` component receives identical props and renders the same structure on both the server and client. Use development tools to inspect hydration warnings.","message":"While `interweave-ssr` provides DOM polyfills for server rendering, it does not guarantee client-side hydration compatibility if the server and client render different content or structures. Ensure your client-side React app also uses `Interweave` correctly to avoid hydration mismatches.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `import { polyfill } from 'interweave-ssr'; polyfill();` at the very beginning of your server-side rendering entry file.","cause":"The `polyfill()` function from `interweave-ssr` was not called, or was called too late after `Interweave` attempted to access browser-specific DOM globals in a Node.js environment.","error":"ReferenceError: document is not defined"},{"fix":"Ensure your project is configured for ES modules (e.g., `\"type\": \"module\"` in `package.json`) or use a bundler (like Webpack with Babel) to transpile your server-side code. For `interweave-ssr` specifically, using `import` requires a module environment.","cause":"Attempting to `require()` or use ESM `import` syntax for `interweave-ssr` in a CommonJS module context, where the package itself is configured as an ES module, without proper transpilation or Node.js `--experimental-modules` flags.","error":"SyntaxError: Cannot use import statement outside a module"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}