HMR does not activate when a file containing only types is modified

[ek68794998]

🐛 Bug report

If you have a TypeScript file that contains only types (e.g., an export interface Foo { ... }), and that file is modified (such as changing a property's type or name), this will cause build errors because any modules that import that type will be HMR-reloaded, but the type file itself will not be.

Setup

For example, I took examples/with-typescript-plugin and added a MyType.ts file to it with a simple interface definition:

// MyType.ts
export interface MyType { value: number; }

I then added a declaration in Home.tsx using that type:

const obj: MyType = { value: 2 };

This compiles correctly:

>>> yarn start

√ Client
  Compiled successfully in 3.19s

√ Server
  Compiled successfully in 1.63s

Issues checking in progress...
✅  Server-side HMR Enabled!
sswp> Handling Hot Module Reloading
> Started on port 3000

No issues found.

Current Behavior

At this point, with watching active, if I modify MyType.ts and change the type of value to string, VS Code shows an error until I update Home.tsx to change the declaration:

const obj: MyType = { value: "abc" };

However, after I do this and save both files, the CLI shows that some files—but not MyType.ts—were hot-reloaded, and gives me an error:

�  HMR Reloading `./server`...
Issues checking in progress...
[HMR] Updated modules:
[HMR]  - ./src/Home.tsx
[HMR]  - ./src/App.tsx
[HMR]  - ./src/server.tsx
sswp> Update applied.

√ Client
  Compiled successfully in 109.10ms

√ Server
  Compiled successfully in 191.57ms

Issues checking in progress...
ERROR in src/Home.tsx:14:27
TS2322: Type 'string' is not assignable to type 'number'.
    12 | class Home extends React.Component<any, any> {
    13 |   public render(): JSX.Element {
  > 14 |     const obj: MyType = { value: "abc" };
       |                           ^^^^^
    15 |     return (
    16 |       <div className="Home">
    17 |         <div className="Home-header">

Note: If I stop and re-run yarn start, there is no error. This only happens because HMR does not reload the MyType.ts module.

Expected behavior

The declarations in MyType.ts should be reloaded, compilation should succeed, and no errors should be printed to the console.

Reproducible example

Here's a ZIP file of a reproducible example. As mentioned above, it's just examples/with-typescript-plugin (plus a bunch of style suppressions) plus the MyType.ts file.

With the downloaded ZIP contents, run yarn start and then make changes to MyType.ts and Home.tsx as described in "Current Behavior" above.

razzle-no-hmr-types.zip

Suggested solution(s)

Not sure how Razzle works with Webpack's HMR, but it needs to be tweaked to properly reload when a module containing only types is modified.

Additional context

N/A

Your environment

Software	Version(s)
Razzle	4.2.15, 4.2.17 (not sure of others)
Razzle Plugins	typescript
Node	16.16.0
Browser	N/A
npm/Yarn	Yarn 1.22.19
Operating System	Windows 11 (2H22)
TypeScript	4.1.3, 4.7.4
React	17.0.2, 17.0.52