Registry / web-framework / interweave-ssr

interweave-ssr

library2.0.0jsnpmunverified

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.

web-framework

npm install interweave-ssr

github ↗package ↗

INSTALL

IMPORT

SIG · INTERWEAVE-SSR

interweave-ssr

web-frameworkjavascriptv2.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

polyfill

✓ import { polyfill } from 'interweave-ssr';

✗ const { polyfill } = require('interweave-ssr');

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.

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.

import React from 'react'; import ReactDOMServer from 'react-dom/server'; import { polyfill } from 'interweave-ssr'; import { Interweave } from 'interweave'; // Assumes interweave is installed // IMPORTANT: Call polyfill() at the entry point of your SSR bundle // before any Interweave components are rendered. polyfill(); const htmlContent = '<p>Hello, <strong>world</strong>!</p>'; function App() { return ( <div> <h1>Server-Side Rendered Content</h1> <Interweave content={htmlContent} /> </div> ); } const appHtml = ReactDOMServer.renderToString(<App />); console.log(`<!DOCTYPE html> <html> <head> <title>Interweave SSR Example</title> </head> <body> <div id="root">${appHtml}</div> </body> </html>`);

Debug

Known issues

gotchaThe `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.

fix

Ensure `import { polyfill } from 'interweave-ssr'; polyfill();` is placed at the top of your SSR bundle's entry point.

affects: >=1.0.0

breakingVersion 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.

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`.

affects: >=2.0.0

gotchaWhile `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.

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.

affects: >=1.0.0

Errors

Common errors & fixes

ReferenceError: document is not defined

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.

fix

Add `import { polyfill } from 'interweave-ssr'; polyfill();` at the very beginning of your server-side rendering entry file.

SyntaxError: Cannot use import statement outside a module

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.

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.

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

interweaveoptionalProvides 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.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/milesj/interweave ↗

packagehttps://www.npmjs.com/package/interweave-ssr ↗