React詰まった点

画面が真っ白に

index.tsxのファイルで以下のように行なっている

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <React.StrictMode>
    <h1>OK</h1>
  </React.StrictMode>,
  document.getElementById("root") as HTMLElement
);

しかし、画面が真っ白に…

原因

index.tsx とは別に、何もしていない空のindex.tsがあったから
index.tsxの中身のReactDOM.renderを表示したいのに、index.tsが優先されてしまった。
その結果表示が真っ白に

解決策

index.tsを消す

webpackのbuild時、TSモジュールがresolveできない

解決策

webpack.config.tsに以下を追記

module.exports = {
  :
  :
  resolve: {
    extensions: ['.tsx', '.ts']
  },
};

こうすることでこれらの拡張子を順番に解決しようとする。複数のファイルが同じ名前を共有しているが拡張子が異なる場合、webpack は配列で最初にリストされた拡張子のものを解決し、残りはスキップする。

参考

https://webpack.js.org/configuration/resolve/#resolveextensions
https://stackoverflow.com/questions/43595555/webpack-cant-resolve-typescript-modules