Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
PatNeedham opened this issue Jun 10, 2020 · 0 comments
Open

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

PatNeedham opened this issue Jun 10, 2020 · 0 comments

Comments

@PatNeedham
Copy link

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"
  }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@PatNeedham