HMR does not work correctly for dynamic imports

[HussainTaj-arbisoft]

Background

In #1102, we switched from the Webpack server to Webpack watch mode builds. Later in #1171, we implemented the server again with an option writeToDisk.

Now we have two commands yarn start:webpack and yarn webpack:serve. The former runs the builds in watch mode and the latter runs a server.

It seems logical to keep only one of these commands. However, dynamic imports do not work correctly with the Webpack server's hot reload feature.

Steps to Reproduce

1. Navigate to your local setup of ocw-hugo-themes
2. Update the command yarn start:webpack in package.json to

   "start:webpack": "yarn with-env --dev -- webpack serve --config ./base-theme/assets/webpack/webpack.dev.ts --hot --stats-children",

3. Run yarn start course
4. Open a video page. You should see a working video.
5. Now comment out this dynamic import and save.
   

   ocw-hugo-themes/course-v2/assets/course-v2.ts

   Line 32 in 86ed293

   import("./videojs-imports").then(module => {

6. Webpack should detect this change and run a build. Refresh the page and the video will no longer work.
7. Undo your changes from step 5 and save.
8. Webpack should rebuild.

Expected Behavior

The video on the page works correctly.

Actual Behavior

The video on the page does not work correctly. And the console shows an error fetching a js file.

What needs to be done?

Investigate the issue. Find out the cause and whether or not this issue can be fixed.

In case this issue can be fixed, create a follow-up ticket to switch to the Webpack server in place of watch mode (i.e. use one of yarn start:webpack or yarn webpack:serve).

Related Issues

Might be related webpack/webpack-dev-server#2792