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:
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.
π 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-pluginand added aMyType.tsfile to it with a simple interface definition:I then added a declaration in
Home.tsxusing that type:This compiles correctly:
Current Behavior
At this point, with watching active, if I modify
MyType.tsand change the type ofvaluetostring, VS Code shows an error until I updateHome.tsxto change the declaration: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:Note: If I stop and re-run
yarn start, there is no error. This only happens because HMR does not reload theMyType.tsmodule.Expected behavior
The declarations in
MyType.tsshould 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 theMyType.tsfile.With the downloaded ZIP contents, run
yarn startand then make changes toMyType.tsandHome.tsxas 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
typescript