React: TypeScript の lint で module.hot 周りでエラーが出た際の解決方法

TypeScript の lint でmodule.hot周りでエラーが出る

ReactやPreactでHMRをやろうとする際、TypeScript (tsx) で書いていると lint で怒られることがある。

Property 'hot' does not exist on type 'NodeModule'

@types/webpack-env を追加すればよいだけ

yarn add --dev @types/webpack-envしよう。

if (module.hot) {
  module.hot.accept("./Top.tsx", () => {
    const AppHMR = require("./Top"); // eslint-disable-line global-require, @typescript-eslint/no-var-requires
    render(<AppHMR.default />, document.querySelector("#app"));
  });

毎回調べてる気がしたので、もういい加減書き残しておこうと思いました。

参考