{"id":20278,"library":"prerender-loader","title":"prerender-loader","description":"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.","status":"active","version":"1.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/GoogleChromeLabs/prerender-loader","tags":["javascript","pre-render","prerendering","webpack plugin","SSR","performance","first contentful paint","FCP"],"install":[{"cmd":"npm install prerender-loader","lang":"bash","label":"npm"},{"cmd":"yarn add prerender-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add prerender-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Loader runs as part of Webpack build; webpack must be installed","package":"webpack","optional":false},{"reason":"Used internally by the loader for in-memory file system operations during prerendering","package":"memory-fs","optional":false}],"imports":[{"note":"CommonJS require works if using Webpack with CJS modules, but ESM is recommended for modern projects. The loader string includes '!!' to bypass other loaders.","wrong":"const html = require('prerender-loader?!./index.html');","symbol":"default import (loader usage)","correct":"import html from 'prerender-loader?!./index.html';"},{"note":"The '?string' parameter is required for HTML output; omitting it causes errors. Use 'use' for multiple loaders, but 'loader' is simpler here.","wrong":"module.exports = { module: { rules: [ { test: /\\.html$/, use: 'prerender-loader' } ] } }","symbol":"Webpack config (module.rules)","correct":"module.exports = { module: { rules: [ { test: /\\.html$/, loader: 'prerender-loader?string' } ] } }"},{"note":"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.","wrong":"new HtmlWebpackPlugin({ template: 'prerender-loader!index.html' })","symbol":"HtmlWebpackPlugin integration","correct":"new HtmlWebpackPlugin({ template: '!!prerender-loader?string!index.html' })"}],"quickstart":{"code":"npm install --save-dev prerender-loader webpack memory-fs\n\n// webpack.config.js\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n entry: './src/index.js',\n output: { filename: 'bundle.js' },\n plugins: [\n new HtmlWebpackPlugin({\n template: '!!prerender-loader?string!index.html'\n })\n ]\n};\n\n// index.html (example)\n\n\nMy App\n\n\n\n// src/index.js (example)\ndocument.getElementById('root').innerHTML = 'Hello
';\n\n// Run: npx webpack --mode production","lang":"javascript","description":"Installs prerender-loader and integrates with HtmlWebpackPlugin to prerender a simple app that modifies the DOM."},"warnings":[{"fix":"Open an issue on GitHub if problems persist; ensure cache invalidation is handled correctly.","message":"Chunk hash mismatches may occur after upgrading prerender-loader (see 1.3.0 release note).","severity":"gotcha","affected_versions":">=1.3.0"},{"fix":"Monitor releases; if Webpack drops memory-fs support, the loader may need updates.","message":"The 'memory-fs' peer dependency is required but may be deprecated in future Webpack versions.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Always use the full inline syntax '!!prerender-loader?string!your-file.html'.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to 1.3.0 or ensure built-in modules are polyfilled.","message":"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'.","severity":"gotcha","affected_versions":"<1.3.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install --save-dev memory-fs","cause":"missing peer dependency memory-fs","error":"Error: Cannot find module 'memory-fs'"},{"fix":"Use '!!prerender-loader?string!file.html' instead of '!!prerender-loader!file.html'","cause":"forgot to add ?string to the loader query","error":"Error: The '?' query parameter is missing or invalid. Use 'string' to export an ES module."},{"fix":"Ensure the loader is applied to an HTML file (not a JS file) or use string prerendering","cause":"the prerendered code references DOM APIs without a JSDOM environment","error":"Error: Prerendering failed: document is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}