prerender-loader
prerender-loader copied to clipboard
GoogleChromeLabs
Presence of `{{prerender}}` inside html template causes error
My /src/template.html file looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
{{prerender}}
</div>
</body>
</html>
And this is my webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const entry = {
home: './src/Home.jsx',
about: './src/About.jsx',
subscribe: './src/Subscribe.jsx',
};
const prerenderPlugins = Object.keys(entry).map(key =>
new HtmlWebpackPlugin({
inject: false,
chunks: [key],
filename: `${key}.html`,
template: `!!prerender-loader?string&entry=${entry[key]}!./src/template.html`,
}),
);
module.exports = {
entry,
output: {
path: path.resolve(__dirname, 'public'),
filename: "assets/[name]/build/bundle.js",
},
plugins: [
new CleanWebpackPlugin(['public']),
...prerenderPlugins,
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
// uses .babelrc as config
loader: 'babel-loader'
}
]
},
],
},
resolve: {
extensions: ['.js', '.jsx']
}
};
That config leads to the Conflict: Multiple chunks emit assets to the same filename ssr-bundle.js found in a few other issues.
However, by removing the {{prerender}} part from the html template, npx webpack command completes successfully. The only problem is that inside the three generated html files, they all have [object Object] appearing right after the <div id="app"></div> and before the closing </body></html>.
For the HtmlWebpackPlugins template value, I made sure the include the entry=${entry[key]} part as suggested by the comment here, which must have worked for some people given the presence of two rocket emojis at the time of me writing this. Why might that not have worked here for me?
I uploaded the full example project I'm using to this repo. And these are the dependencies in use:
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"@babel/cli": "^7.10.1",
"@babel/core": "^7.10.2",
"@babel/plugin-proposal-export-default-from": "^7.10.1",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1",
"@babel/register": "^7.10.1",
"babel-loader": "^8.1.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"clean-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^4.3.0",
"prerender-loader": "^1.3.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}
