Presence of `{{prerender}}` inside html template causes error #52

PatNeedham · 2020-06-10T12:57:00Z

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"
  }

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Presence of `{{prerender}}` inside html template causes error #52

Presence of `{{prerender}}` inside html template causes error #52

PatNeedham commented Jun 10, 2020

Presence of {{prerender}} inside html template causes error #52

Presence of {{prerender}} inside html template causes error #52

Comments

PatNeedham commented Jun 10, 2020

Presence of `{{prerender}}` inside html template causes error #52

Presence of `{{prerender}}` inside html template causes error #52