HMR error: process is not defined

[Hellenic]

🐛 Bug report

Current Behavior

I'm having issue with After.js and hot module replacement. Modifying the application in development mode properly brings in the changes to the browser but also gives error in the console, basically requiring page reload.

Expected behavior

I'd expect HMR to work without errors. Plain Razzle.js application without After.js work well and HMR works as expected, so I assume it's After.js related.

Reproducible example

Steps to re-produce:

• Take the basic example https://github.com/jaredpalmer/after.js/tree/master/examples/basic
  • Note that there's a typo too in the instructions. Instead of razzle-master it should be after.js-master
• npm start and open the browser. You should see application without any errors in the console
• Modify Home.js and you'll see your changes appear in the browser, as well as process in not defined error in the console
  • This error blocks further use of the application and requires page reload

More details of the error

Error in Firefox:

Uncaught ReferenceError: process is not defined
    4043 blank line 32939 > injectedScript:2

Error in Chrome

VM58:2 Uncaught ReferenceError: process is not defined
    at Object.4043 (<anonymous>:2:13168)
    at r (<anonymous>:2:306599)

While this might not be helpful, here's deeper details of the error when following the stack trace in Chrome:

// On top of this compiled file there's a mention of `iframe-bundle.js`, if it's any relevant.
// ...
        4043: (e,t,r)=>{
            "use strict";
            var n = r(3041).default
              , o = r(2865)
              , a = r(2611)
              , i = r(5215).stdout
              , l = r(7093)
>>>           , u = "win32" === process.platform && !({
                NODE_ENV: "production"
            }.TERM || "").toLowerCase().startsWith("xterm")
              , s = ["ansi", "ansi", "ansi256", "ansi16m"]
              , c = new Set(["gray"])
              , f = Object.create(null);

After receiving this error, after reloading page there's another error which is either

Home.17dcac1c2826d5d21e51.hot-update.js:1 Uncaught TypeError: self.webpackHotUpdateclient is not a function
    at Home.17dcac1c2826d5d21e51.hot-update.js:1:31
(anonymous) @ Home.17dcac1c2826d5d21e51.hot-update.js:1
react-dom.development.js:26244 Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
log.js:24 [HMR] Waiting for update signal from WDS...
webpackHotDevClient.js:83 The development server has disconnected.
Refresh the page if necessary.

or sometimes simply GET Home....hot-update.js 404 (Not Found)

Suggested solution(s)

This is not a proper solution, but as a work-around; downgrading Webpack seems to work, as per Razzle.js instructions: https://razzlejs.org/getting-started#dependencies Specifically running yarn add --dev webpack@4.46.0 html-webpack-plugin@4.5.2 seems to fix the issue.

Additional context

Already closed issue in Razzle.js seems somewhat related https://github.com/jaredpalmer/razzle/issues/1187

In conclusion, is this maybe Webpack 5 and possible webpack-dev-server related?

Your environment

Software	Version(s)
Node	14.18.3
npm/Yarn	npm 6.14.15 (Also tried with yarn 1.22.17 and same thing)
Browser	Tested in Chrome 97 and Firefox 96
Operating System	Ubuntu 20.04.03 LTS

  "dependencies": {
    "@jaredpalmer/after": "latest", (@3.2.0) 
    "express": "^4.17.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-router-dom": "^5.3.0"
  },
  "devDependencies": {
    "razzle": "^4.2.6",
    "razzle-dev-utils": "^4.2.6",
    "razzle-plugin-manifest": "^4.2.6",
    "babel-preset-razzle": "^4.2.6",
    "html-webpack-plugin": "5.2.0",
    "mini-css-extract-plugin": "0.9.0",
    "postcss": "8.2.4",
    "webpack": "5.24.0",
    "webpack-dev-server": "3.11.0"
  }

[anthonyp-usafacts]

@Hellenic try bumping up to 5.65.0 which is stable for my use of After.

[Hellenic]

Tried that version and it seemed fine at first, but quite soon I started getting process in not defined, so in my case didn't seem to help.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.