Dev mode breaks when additional languages are added

[SheetJSDev]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

When docusaurus is running in dev mode and the config is changed to add a new prism language, the change is detected (client recompiles) but the browser is blank and the console shows the error:

Uncaught Error: Cannot find module './prism-$LANGUAGE'

The error is cleared up by restarting the dev server process. Ideally, webpack would detect that the new language is added and actually include it in the bundle.

Reproducible demo

No response

Steps to reproduce

1. create a new site
2. run npm start and keep it open
3. add a language. The exact example in https://docusaurus.io/docs/next/markdown-features/code-blocks#supported-languages can be followed
4. observe that the browser window is blank and inspect the console

Expected behavior

The hot reload system detects that the new language must be loaded OR a message that the dev server should be restarted.

Actual behavior

Browser is blank and the error console states that a prism module is missing.

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used:
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

Tempted to say it's working as intended because we have a bundle-optimizing system that only loads necessary Prism modules, and that apparently doesn't work with hot reloading. But I think we can turn that off during dev.

[SheetJSDev]

It's ok to keep the bundle-optimizing system on during development. What would be helpful is some sort of hint that the dev server should be restarted.

When the error occurs, it's impossible to distinguish between "specified a supported language but the server needs to be restarted" and "specified an unsupported language" without forcefully restarting.

[slorber]

Yes that makes sense.

We have a few cases where we should probably try to update the webpack compiler config.

Similarly, if you swizzle a component while your dev server is running, it won't work because Webpack aliases are not updated => confusing DX

[slorber]

Closing in favor of #10238