Repository: webpack/webpack (JavaScript)

Issue:
HMR breaks async module graph + dynamic import (Top level await or Async WebAssembly)
<!-- Please don't delete this template because we'll close your issue -->
<!-- Before creating an issue please make sure you are using the latest version of webpack. -->

# Bug report

<!-- Please ask questions on StackOverflow or the webpack Gitter. -->
<!-- https://stackoverflow.com/questions/ask?tags=webpack -->
<!-- https://gitter.im/webpack/webpack -->
<!-- Issues which contain questions or support requests will be closed. -->

**What is the current behavior?**

Webpack generates invalid code:

> Uncaught (in promise) ReferenceError: _defer_js__WEBPACK_IMPORTED_MODULE_1__ is not defined

**If the current behavior is a bug, please provide the steps to reproduce.**

Reproduction: https://github.com/Jack-Works-forks/webpack-hmr-async-module-bug

```sh
npx webpack serve --mode development --hot
```

<!-- A great way to do this is to provide your configuration via a GitHub repository -->
<!-- The most helpful is a minimal reproduction with instructions on how to reproduce -->
<!-- Repositories with too many files or large `webpack.config.js` files are not suitable -->
<!-- Please only add small code snippets directly into this issue -->
<!-- https://gist.github.com is a good place for longer code snippets -->
<!-- If your issue is caused by a plugin or loader, please create an issue on the loader/plugin repository instead -->

**What is the expected behavior?**

Works normally


<!-- "It should work" is not a helpful explanation -->
<!-- Explain exactly how it should behave -->

**Other relevant information:**
webpack version:  5.65.0
Node.js version: 17.2.0




Hints:
Webpack config:

```js
const html = require('html-webpack-plugin')
module.exports = {
    devtool: false,
    experiments: { topLevelAwait: true },
    optimization: { minimize: false },
    plugins: [new html()]
}
```

> src/index.js

```js
import './tla.js'
import('./defer.js').then(console.log)
import.meta.webpackHot.accept(['./defer.js'], () => console.log('hmr'))
```

> src/defer.js

```js
import log from './tla.js'
log()
```

> src/tla.js

```js
await Promise.resolve()
export default function log() {
    console.log('log called')
}
```
Yes, bug, thanks for the issue
Is there any ongoing fix? Or if I should try it?
You can send a PR

Patch:
diff --git a/lib/dependencies/HarmonyAcceptImportDependency.js b/lib/dependencies/HarmonyAcceptImportDependency.js
--- a/lib/dependencies/HarmonyAcceptImportDependency.js
+++ b/lib/dependencies/HarmonyAcceptImportDependency.js
@@ -7,6 +7,7 @@
 
 const makeSerializable = require("../util/makeSerializable");
 const HarmonyImportDependency = require("./HarmonyImportDependency");
+const NullDependency = require("./NullDependency");
 
 /** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */
 /** @typedef {import("../Dependency")} Dependency */
@@ -28,8 +29,9 @@ makeSerializable(
 	"webpack/lib/dependencies/HarmonyAcceptImportDependency"
 );
 
-HarmonyAcceptImportDependency.Template = class HarmonyAcceptImportDependencyTemplate extends (
-	HarmonyImportDependency.Template
-) {};
+HarmonyAcceptImportDependency.Template =
+	/** @type {typeof HarmonyImportDependency.Template} */ (
+		NullDependency.Template
+	);
 
 module.exports = HarmonyAcceptImportDependency;


Test patch:
diff --git a/test/configCases/issues/issue-14974/defer.js b/test/configCases/issues/issue-14974/defer.js
new file mode 100644
--- /dev/null
+++ b/test/configCases/issues/issue-14974/defer.js
@@ -0,0 +1,2 @@
+import log from "./tla.js"
+log();
diff --git a/test/configCases/issues/issue-14974/index.js b/test/configCases/issues/issue-14974/index.js
new file mode 100644
--- /dev/null
+++ b/test/configCases/issues/issue-14974/index.js
@@ -0,0 +1,6 @@
+import "./tla.js"
+const a = import("./defer.js")
+import.meta.webpackHot.accept(["./defer.js"], () => {})
+it("should compile", async () => {
+	expect(await a).toBeTruthy();
+});
diff --git a/test/configCases/issues/issue-14974/test.filter.js b/test/configCases/issues/issue-14974/test.filter.js
new file mode 100644
--- /dev/null
+++ b/test/configCases/issues/issue-14974/test.filter.js
@@ -0,0 +1,3 @@
+module.exports = function () {
+	return process.version.slice(0, 4) !== "v10."
+};
diff --git a/test/configCases/issues/issue-14974/tla.js b/test/configCases/issues/issue-14974/tla.js
new file mode 100644
--- /dev/null
+++ b/test/configCases/issues/issue-14974/tla.js
@@ -0,0 +1,4 @@
+await Promise.resolve();
+export default function log() {
+	return 1;
+}
diff --git a/test/configCases/issues/issue-14974/webpack.config.js b/test/configCases/issues/issue-14974/webpack.config.js
new file mode 100644
--- /dev/null
+++ b/test/configCases/issues/issue-14974/webpack.config.js
@@ -0,0 +1,9 @@
+const { HotModuleReplacementPlugin } = require("../../../../");
+
+/** @type {import("../../../../").Configuration} */
+module.exports = {
+	devtool: false,
+	experiments: { topLevelAwait: true },
+	optimization: { usedExports: false, sideEffects: false },
+	plugins: [new HotModuleReplacementPlugin()]
+};