Registry / web-framework / react-loadable-ssr-addon-v5-slorber

react-loadable-ssr-addon-v5-slorber

library1.0.3jsnpmunverified

React Loadable SSR Add-on (npm package `react-loadable-ssr-addon-v5-slorber`, version 1.0.3) is a specialized server-side rendering utility designed to complement `React Loadable` for managing dynamically loaded JavaScript and CSS assets. It integrates with Webpack via a plugin that generates an `assets-manifest.json` file, detailing all bundled chunks and their dependencies. On the server, it consumes this manifest along with module IDs captured by `Loadable.Capture` to correctly inject the required `<link>` and `<script>` tags into the HTML response. A key differentiator is its optional support for Subresource Integrity (SRI), enhancing security by adding cryptographic hashes to asset links. While the specific package name includes 'v5-slorber', its peer dependencies indicate broad compatibility with `react-loadable` and `webpack` v4/v5, making it a robust solution for ensuring all necessary assets, including code-split chunks, are present during SSR without client-side fetching delays. There is no explicit release cadence stated, but the 1.x.x version implies a stable API.

web-framework

npm install react-loadable-ssr-addon-v5-slorber

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-LOADABLE-SSR

react-loadable-ssr-addon-v5-slorber

web-frameworkjavascriptv1.0.3

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.

ReactLoadableSSRAddon

✓ const ReactLoadableSSRAddon = require('react-loadable-ssr-addon');

✗ import ReactLoadableSSRAddon from 'react-loadable-ssr-addon';

Primarily used in `webpack.config.js`, which often uses CommonJS `require()` syntax. While modern Webpack configs can support ESM, `require()` is explicitly shown in the documentation.

getBundles

✓ import { getBundles } from 'react-loadable-ssr-addon';

✗ const { getBundles } = require('react-loadable-ssr-addon');

Designed for Node.js server environments, typically used with ES Modules `import` syntax. Ensure your server setup supports ESM or transpile if necessary.

This quickstart demonstrates the core usage of `react-loadable-ssr-addon` by configuring its Webpack plugin to generate an `assets-manifest.json` file. It then utilizes the `getBundles` function on the server to dynamically inject the correct CSS and JavaScript bundles, including code-split chunks and Subresource Integrity (SRI) hashes, into the server-rendered HTML response, ensuring all required assets are loaded for a complete SSR experience.

import path from 'path'; import ReactLoadableSSRAddon from 'react-loadable-ssr-addon'; // webpack.config.js // Simplified Webpack configuration excerpt const webpackConfig = { entry: { main: './src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', publicPath: '/dist/' }, plugins: [ new ReactLoadableSSRAddon({ filename: 'assets-manifest.json', integrity: true, // Enable SRI for enhanced security integrityAlgorithms: ['sha256'] }) ] }; // server.ts (simplified example) // Assume React, ReactDOMServer, and React Loadable are installed and configured import React from 'react'; import ReactDOMServer from 'react-dom/server'; import Loadable from 'react-loadable'; import { getBundles } from 'react-loadable-ssr-addon'; import manifest from '../dist/assets-manifest.json'; // Adjust path as needed based on webpack output // Mock a simple React App component const App = () => React.createElement('h1', null, 'Hello SSR!'); async function renderAndSendHtml() { const modules = new Set<string>(); // In a real application, you might call Loadable.preloadAll() here // await Loadable.preloadAll(); const htmlContent = ReactDOMServer.renderToString( React.createElement(Loadable.Capture, { report: moduleName => modules.add(moduleName) }, React.createElement(App) ) ); // Combine manifest entrypoints with modules captured by Loadable.Capture const modulesToBeLoaded = [...manifest.entrypoints, ...Array.from(modules)]; const bundles = getBundles(manifest, modulesToBeLoaded); const styles = bundles.css || []; const scripts = bundles.js || []; // Construct the final HTML response const finalHtml = ` <!doctype html> <html lang="en"> <head> <title>My SSR App</title> ${styles.map(style => `<link href="${process.env.PUBLIC_PATH || '/dist/'}${style.file}" rel="stylesheet" integrity="${style.integrity || ''}" crossorigin="anonymous" />`).join('\n')} </head> <body> <div id="app">${htmlContent}</div> ${scripts.map(script => `<script src="${process.env.PUBLIC_PATH || '/dist/'}${script.file}" integrity="${script.integrity || ''}" crossorigin="anonymous"></script>`).join('\n')} </body> </html> `; console.log(finalHtml); // In a real server, you would send this as a response } // Execute the SSR process renderAndSendHtml().catch(console.error);

Debug

Known issues

gotchaThe `react-loadable-ssr-addon` package should be installed as a regular dependency (`dependencies`) and not as a development dependency (`devDependencies`) as it is required at runtime for server-side rendering.

fix

Ensure the package is listed under `dependencies` in your `package.json` file, and install it using `npm install react-loadable-ssr-addon` or `yarn add react-loadable-ssr-addon`.

affects: >=1.0.0

gotchaIncorrect ordering of `manifest.entrypoints` and modules captured by `Loadable.Capture` can lead to issues where some files are still fetched client-side instead of being preloaded during server rendering.

fix

Experiment with the order of concatenating `modulesToBeLoaded`. If `[...manifest.entrypoints, ...Array.from(modules)]` causes issues, try `[...Array.from(modules), ...manifest.entrypoints]`. Refer to issue #6 on the GitHub repository for more context.

affects: >=1.0.0

gotchaSubresource Integrity (SRI) hash generation is disabled by default in the Webpack plugin. If you require SRI for enhanced security, it must be explicitly enabled.

fix

Set the `integrity: true` option in the `ReactLoadableSSRAddon` Webpack plugin configuration, e.g., `new ReactLoadableSSRAddon({ filename: 'assets-manifest.json', integrity: true })`.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'react-loadable-ssr-addon' in '...'

The package is not installed or the import path in `webpack.config.js` or server-side code is incorrect.

fix

Run `npm install react-loadable-ssr-addon` or `yarn add react-loadable-ssr-addon`. Verify that the import or require path matches the package name.

TypeError: manifest.entrypoints is not iterable

TypeError: Cannot read properties of undefined (reading 'entrypoints')

The `assets-manifest.json` file was not generated by the Webpack plugin, is empty, or the path used to import it on the server is incorrect.

fix

Ensure the `ReactLoadableSSRAddon` Webpack plugin is correctly configured and runs during your build. Check the `filename` option in the plugin to ensure the manifest is written to the expected location, and verify the `import manifest from './path/to/assets-manifest.json'` statement on your server points to the correct file.

SyntaxError: Unexpected token 'export' (when using require on server-side)

Attempting to use CommonJS `require()` syntax to load `getBundles` which is likely exposed as an ES Module.

fix

For server-side usage of `getBundles`, use ES Modules `import` syntax: `import { getBundles } from 'react-loadable-ssr-addon';`. Ensure your Node.js environment or build setup supports ES Modules.

Upgrade

Version history

1.0.3latest on npm

Audit

Dependencies

react-loadablerequiredCore dependency; this package extends its Server-Side Rendering (SSR) capabilities.

webpackrequiredRequired for the Webpack plugin to generate the `assets-manifest.json` file.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/themgoncalves/react-loadable-ssr-addon ↗

packagehttps://www.npmjs.com/package/react-loadable-ssr-addon-v5-slorber ↗