prerender-loader
prerender-loader copied to clipboard
Published
20 hours ago •
GoogleChromeLabs
GoogleChromeLabs
Injecting content doesn't work
Webpack config
// ...
mode: 'production',
rules: [
{
test: path.resolve(__dirname, 'public/index.html'),
loader: 'prerender-loader?string'
},
// ...
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: 'css/[name].css',
}),
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/index.html'),
}),
],
// ...
Template
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
{{prerender}}
</div>
</body>
</html>
Entrypoint
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import './index.css';
import App from './App';
ReactDOM.hydrate(<App />, document.getElementById('root'));
export default () => {
return ReactDOMServer.renderToString(<App />);
}
When I run webpack, get
ERROR in ./public/index.html (./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html)
Module build failed (from ./node_modules/prerender-loader/dist/prerender-loader.js):
NotFoundError: The object can not be found here.
at HTMLDivElementImpl.insertBefore (/path/to/my/project/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:206:17)
at HTMLDivElement.insertBefore (/path/to/my/project/node_modules/jsdom/lib/jsdom/living/generated/Node.js:264:45)
at $If_2 (/path/to/my/project/node_modules/prerender-loader/dist/prerender-loader.js:237:36)
at /path/to/my/project//node_modules/prerender-loader/dist/prerender-loader.js:249:30
at <anonymous>
I changed the exported function to
export default () => {
return ReactDOM.render(<App />, document.getElementById('root'));
}
The build completed without error. But I don't know if it's the right way to use this loader.
My repository is here if you need it.
