Error when building - self is not defined

[clauderobi]

Hi, I am trying to prerender a simple React project. In fact I duplicated the example found in docs/read.md in an exisitng project and adjusted my webpack.config.js to point to the correct app.js file (different filename).

I am getting this;
ERROR in Error: HtmlWebpackPrerenderPlugin ERROR: Error evaluating your app script.
ReferenceError: self is not defined

• index.js:344 HtmlWebpackPrerenderPlugin.injectApp
  [corpoWeb]/[html-webpack-prerender-plugin]/dist/index.js:344:13

• index.js:401
  [corpoWeb]/[html-webpack-prerender-plugin]/dist/index.js:401:43

• index.js:128 _catch
  [corpoWeb]/[html-webpack-prerender-plugin]/dist/index.js:128:16

• index.js:400
  [corpoWeb]/[html-webpack-prerender-plugin]/dist/index.js:400:24

• index.js:118
  [corpoWeb]/[html-webpack-prerender-plugin]/dist/index.js:118:43

• index.js:88 _cycle
  [corpoWeb]/[html-webpack-prerender-plugin]/dist/index.js:88:14

• index.js:107 _forTo
  [corpoWeb]/[html-webpack-prerender-plugin]/dist/index.js:107:2

• index.js:118 _forIn
  [corpoWeb]/[html-webpack-prerender-plugin]/dist/index.js:118:9

• index.js:397
  [corpoWeb]/[html-webpack-prerender-plugin]/dist/index.js:397:22

My hunch is that it is a version compatibility issue but I am really not sure. In any case here are the different version of all modules I have ibn the sandbox:
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.5",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"css-loader": "^5.2.6",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"html-react-parser": "^1.3.0",
"html-webpack-plugin": "^5.3.1",
"html-webpack-prerender-plugin": "^0.1.0",
"markdown-loader": "^6.0.0",
"node-sass": "^6.0.0",
"react-hot-loader": "^4.13.0",
"sass-loader": "^12.1.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.39.1",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"styled-components": "^5.3.0"
}

Any feedback?

[ArcadeRenegade]

Same issue. I don't think this plugin supports Webpack 5 yet.

[clauderobi]

It is a bit of a pain but I took a completely different approach. On the client side, I simply pull the current DOM, make some adjustments to the headers (to be SEO friendly) and then push the HTML code to the dev server. I configured the server to store the HTML code in files in a dedicated directory. Obviously I am running this only when my app is in dev mode and make sure to visit all the subpages.

My deployment script picks up the files and adds them into the package it creates along with the normal build artefacts. Before that, the script run chrome in headless mode to produce updated pre rendered pages.

Works very well. The only caveat is that the dev server must be running when doing a deployment.