この記事は2022年4月に、React 16以下を利用していた環境で遭遇した事象についてまとめたものです。
現在のReactやTypeScript、Visual Studio Codeでは状況が異なる場合がありますが、当時のトラブルシューティング記録として残しています。
この記事の対象者
- Visual Studio Codeを使用している
- React 16以下など、JSXを利用するために
Reactのimportが必要な環境を使用している - 保存すると
import React from "react"が勝手に消えてしまう
結論
私の場合は、typescript@nextを利用するためのVisual Studio Code拡張機能が原因でした。
この拡張機能をインストールしている場合は、無効化または削除することで解消しました。
なぜimport React from "react"が消えたのか
当時、TypeScriptのNightly Buildであるtypescript@nextを利用するための拡張機能を入れていました。
この環境では、不要なimportとして、
import React from "react";
が自動的に削除されていました。
一方、当時利用していたReact 16以下の環境では、このimportが必要だったため、削除されると困る状態になっていました。
React 17で新しいJSX Transformが導入され、新しいTransformを利用する環境では、JSXを使うためだけにReactをimportする必要がなくなりました。
そのため、現在のReact環境ではimport React from "react"がないこと自体が問題とは限りません。
まとめ
私の場合は、
VSCodeで保存する
↓
import React from "react" が消える
↓
typescript@nextを利用する拡張機能を確認
↓
拡張機能を削除
↓
解消
という流れでした。
同じように、必要なimportがVisual Studio Code上で勝手に消えてしまう場合は、使用しているTypeScriptのバージョンや拡張機能を確認してみるとよさそうです。