Webpack 5.45.0 error "Module parse failed: Unexpected token (2:7)" Webpack 5.46.0 repeats "[HMR] Nothing hot updated."

[cskeogh]

🐛 Bug report

Current Behavior

Webpack 5.45.0 and 5.46.0 doesn't work.
I read #1662 - this is different - Webpack 5.44.0 works great for me with Razzle.js.

Expected behavior

Demo razzle-app works with Webpack 5.46.0.

Reproducible example

Webpack 4.44.1:

yarn create razzle-app razzle-nothing-hot-updated
cd razzle-nothing-hot-updated
yarn start

Works great!

---

Update to Webpack 5.44.0:

diff --git a/package.json b/package.json
index 4eb0002..566aaf9 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "mini-css-extract-plugin": "^0.9.0",
     "razzle": "^4.0.5",
     "razzle-dev-utils": "^4.0.5",
-    "webpack": "^4.44.1",
+    "webpack": "5.44.0",
     "webpack-dev-server": "^3.11.2"
   }
 }

yarn install
yarn start

Works great!

---

Update to Webpack 5.45.0.

Browser reports error:

Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import _typeof from "@babel/runtime/helpers/typeof";
> import assertThisInitialized from "./assertThisInitialized.js";
| export default function _possibleConstructorReturn(self, call) {
|   if (call && (_typeof(call) === "object" || typeof call === "function")) {

---

Update to Webpack 5.46.0.

$ yarn start
yarn run v1.22.5
$ razzle start
If you have issues with css make sure postcss resolves to v8.2.4.
See: https://razzlejs.org/getting-started#common-issues

CssMinimizerPlugin currently uses clean-css,
we will switch to cssnano once it supports postcss v8.2.4.
 WAIT  Compiling...

√ Client
√ Server
  Compiled successfully in 198.55ms

sswp> Handling Hot Module Reloading
✅  Server-side HMR Enabled!
> Started on port 3000
[HMR] Nothing hot updated.
[HMR] Nothing hot updated.
[HMR] Nothing hot updated.
[HMR] Nothing hot updated.
[HMR] Nothing hot updated.
[HMR] Nothing hot updated.

[HMR] Nothing hot updated. repeated forever. Server doesn't respond on localhost:3000

Additional context

Maybe a Webpack bug?

Your environment

Software	Version(s)
Razzle	4.0.5
Razzle Plugins	none
Node	16.5.0
Browser	Chrome
npm/Yarn	yarn 1.22.5
Operating System	Windows 10
TypeScript	No
React	17.0.2

[Aeonrush]

Hi
I have a same issue, after downgrading to webpack@5.45.1 everything works as expected

[fivethreeo]

https://nicedoc.io/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md#user-content-i-see-hmr-nothing-hot-updated-and-nothing-happens-when-i-edit-appjs

Just googled a bit, not sure if it is related.

[Aeonrush]

https://nicedoc.io/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md#user-content-i-see-hmr-nothing-hot-updated-and-nothing-happens-when-i-edit-appjs

Just googled a bit, not sure if it is related.

Thanks for the link, but, unfortunately, I couldn't get the desired result, maybe I was doing something wrong.

After doing a little research, I figured out that changing the config to

if (opts.env.dev === true && opts.env.target === 'node') {
  opts.webpackConfig.entry.server = [
    require.resolve('razzle-dev-utils/prettyNodeErrors'),
    require.resolve('webpack/hot/poll'),
    require.resolve('./src/'),
  ];
}

More precisely, changing webpack/hot/poll?300 to, simple, webpack/hot/poll allows you to get rid of the infinite loop of [HMR] Nothing hot updated.

The application finally displays something in the browser, but when you change any file, a message appears in the terminal

sswp> Update failed: apply() is only allowed in ready status
    at /home/alexander/web-client/web-client/webpack/runtime/hot module replacement:279:1
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

And HMR started to work unstable. With webpack@5.45.1 everything works

Dependencies

"babel-preset-razzle": "4.0.5",
"razzle": "4.0.5",
"razzle-dev-utils": "4.0.5",
"razzle-plugin-graphql": "^4.0.5",
"razzle-plugin-scss": "^4.0.5",
"webpack": "5.46.0",
"webpack-dev-server": "^3.11.2"

---

Best regards

[fivethreeo]

razzle/packages/razzle-start-server-webpack-plugin/src/monitor.js

Line 3 in b8154c0

// Handle hot updates, copied with slight adjustments from webpack/hot/signal.js

We seem to be doing poll and signal. That may explain a lot 😀

[fivethreeo]

Try removing poll.

[cskeogh]

I performed a git bisect of Webpack.

The error The Module parse failed: Unexpected token (2:7) is fixed: ✅

• Introducted in Webpack v5.45.0 by commit webpack/webpack@b166f46 parse import assertions, merged in webpack/webpack@df02bc6 by parse import assertions webpack/webpack#12278 for bug Implement import assertions webpack/webpack#11917
• Fixed in Webpack v5.45.1 by commit webpack/webpack@61946b7 Revert "Merge pull request #12278 from xtuc/sven/import-assertions"

The error [HMR] Nothing hot updated. is not fixed: ❌

• Introducted in Webpack v5.46.0 by commit webpack/webpack@e852415 Allow HMR status handlers to return a Promise, merged in webpack/webpack@a87dba4 by Allow HMR status handlers to return a Promise webpack/webpack#13576

[alexander-akait]

Fixed https://github.com/webpack/webpack/releases/tag/v5.48.0, please update

[Aeonrush]

Hi
I can confirm that with webpack@5.48.0 the infinite loop is gone, but the message in terminal remains

sswp> Update failed: apply() is only allowed in ready status
    at /home/alexander/web-client/web-client/webpack/runtime/hot module replacement:279:1
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

But, despite the message, the modules have been replaced and so far everything works as expected

Best regards

[cskeogh]

I'm running webpack@5.51.1. Works great again. Closing.