prerender-loader

1.3.0 verified Sat Apr 25 auth: no javascript

Webpack loader for prerendering single-page applications at build time, providing static HTML to improve First Contentful Paint (FCP) and SEO. Current stable version is 1.3.0, with initial release in 2019 and intermittent minor updates. Unlike SSR frameworks that require a server, prerender-loader works entirely within the Webpack build pipeline, integrates seamlessly with html-webpack-plugin, supports both DOM and string prerendering, and runs under Node.js with JSDOM. It is maintained by Google Chrome Labs.

Common errors

error Error: Cannot find module 'memory-fs' ↓

cause missing peer dependency memory-fs

fix

npm install --save-dev memory-fs

error Error: The '?' query parameter is missing or invalid. Use 'string' to export an ES module. ↓

cause forgot to add ?string to the loader query

fix

Use '!!prerender-loader?string!file.html' instead of '!!prerender-loader!file.html'

error Error: Prerendering failed: document is not defined ↓

cause the prerendered code references DOM APIs without a JSDOM environment

fix

Ensure the loader is applied to an HTML file (not a JS file) or use string prerendering

Warnings

gotcha Chunk hash mismatches may occur after upgrading prerender-loader (see 1.3.0 release note). ↓

fix Open an issue on GitHub if problems persist; ensure cache invalidation is handled correctly.

deprecated The 'memory-fs' peer dependency is required but may be deprecated in future Webpack versions. ↓

fix Monitor releases; if Webpack drops memory-fs support, the loader may need updates.

gotcha The loader string '!!prerender-loader?string!index.html' must include '!!' to bypass other loaders and '?string' to return a string; omitting either causes build errors or unexpected output. ↓

fix Always use the full inline syntax '!!prerender-loader?string!your-file.html'.

gotcha Node.js built-in modules (e.g., 'url') are now supported in prerender code as of 1.3.0; earlier versions may fail with 'require is not defined'. ↓

fix Upgrade to 1.3.0 or ensure built-in modules are polyfilled.

Install

npm install prerender-loader

yarn add prerender-loader

pnpm add prerender-loader

Imports

default import (loader usage)
wrong
```
const html = require('prerender-loader?!./index.html');
```
correct
```
import html from 'prerender-loader?!./index.html';
```
CommonJS require works if using Webpack with CJS modules, but ESM is recommended for modern projects. The loader string includes '!!' to bypass other loaders.

Webpack config (module.rules)

wrong

module.exports = { module: { rules: [ { test: /\.html$/, use: 'prerender-loader' } ] } }

correct

module.exports = { module: { rules: [ { test: /\.html$/, loader: 'prerender-loader?string' } ] } }

The '?string' parameter is required for HTML output; omitting it causes errors. Use 'use' for multiple loaders, but 'loader' is simpler here.

HtmlWebpackPlugin integration
wrong
```
new HtmlWebpackPlugin({ template: 'prerender-loader!index.html' })
```
correct
```
new HtmlWebpackPlugin({ template: '!!prerender-loader?string!index.html' })
```
The '!!' prefix is important to avoid double-processing by html-loader or raw-loader. The '?string' query ensures the loader exports a string, not raw HTML.

Quickstart

Installs prerender-loader and integrates with HtmlWebpackPlugin to prerender a simple app that modifies the DOM.

npm install --save-dev prerender-loader webpack memory-fs

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js' },
  plugins: [
    new HtmlWebpackPlugin({
      template: '!!prerender-loader?string!index.html'
    })
  ]
};

// index.html (example)
<!DOCTYPE html>
<html>
<head><title>My App</title></head>
<body><div id="root"></div></body>
</html>

// src/index.js (example)
document.getElementById('root').innerHTML = '<h1>Hello</h1>';

// Run: npx webpack --mode production