Bug report

I was following the webpack documentation guide.
After installing webpack-dev-server, It's supposed to refresh in place.
However, that is not happening. I got the following error:

Uncaught TypeError: Cannot set properties of undefined (setting './src/index.js')
at self.webpackHotUpdatewebkack_guide (jsonp chunk loading:44:1)
at index.17c225e1ecf28bdb9b74.hot-update.js:2:38

HMR] Update failed: ChunkLoadError: Loading hot update chunk index failed.
(missing: http://localhost:8080/index.17c225e1ecf28bdb9b74.hot-update.js)

I do not understand what could be wrong. It only works after I refresh the page.
Interestingly, I could change any other file than index.js and it refreshes correctly.
The problem appears when I change anything inside index.js

Any suggestion?

Other relevant information:
node v14.16.1
// package.json
{
"name": "webkack-guide",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"watch": "webpack --watch",
"build": "webpack",
"start": "webpack serve --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"private": true,
"devDependencies": {
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
},
"dependencies": {
"lodash": "^4.17.21"
}
}

// index.js
import _ from "lodash";

import printMe from "./print";

function component() {
const element = document.createElement("div");
const btn = document.createElement("button");

element.innerHTML = _.join(["hello", "webpack"], " ");

btn.innerHTML = "click me and check the console";
btn.onclick = printMe;

element.appendChild(btn);

return element;
}

document.body.appendChild(component());

// print.js
export default function printMe() {
console.log("I get called from print.js 5");
}

// webpack.config
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
mode: "development",
entry: {
index: "./src/index.js",
print: "./src/print.js",
},
devServer: {
static: "./dist",
},
devtool: "inline-source-map",
plugins: [new HtmlWebpackPlugin({ title: "Output Management" })],
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
clean: true,
},
};