📌

File is a CommonJS module; it may be converted to an ES module.の解決方法

2023/07/09に公開

CommonJSの記法で書かれたファイルに対し、TypeScriptが次のようなメッセージを表示する場合があります

File is a CommonJS module; it may be converted to an ES module.

このメッセージはエラーでも警告でもなく、TypeScriptがCommonJSで書かれたファイルをESの記法に変換するかもしれません、と伝えているだけです。

よって修正する必要はないのですが、見たいものでもありません。

どうすれば、非表示に、あるいは根本解決できるのでしょうか？

手順を説明します。

VSCode
- CJS から ES へ変換する
  - ３つのドットの箇所にマウスを持っていくと、次のQuickFixが表示されるはずです。
  - 💡マークをクリックするとES記法へ変換されます。
```
//-- CommonJS --//
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

//-- ES --//
export const plugins = {
  tailwindcss: {},
  autoprefixer: {},
};
```
  - 注意点
    - ES記法へ変換したことでコードが動かなくなるかもしれません。
    - 例えば、next.config.js というファイルはES記法だとNextの開発サーバーが起動しません。
    - 公式の説明を御覧ください
- 機能を無効にする
  - とりあえず非表示にしたい、であれば次の設定をFalse にしてください。Stackoverflowより。
Neovim
- CJS から ES へ変換する
  - LSPのcode actionを使ってください。次の図は私が使っている環境のものです。
  - CommonJSからESへ変換されます。
```
//-- CommonJS --//
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

//-- ES --//
export const plugins = {
  tailwindcss: {},
  autoprefixer: {},
};
```
  - 変換した場合の注意点
    - ES記法へ変換したことでコードが動かなくなるかもしれません。
    - 例えば、next.config.js というファイルはES記法だとNextの開発サーバーが起動しません。
    - 公式の説明を御覧ください
- 機能を無効にする
  - VSCodeのようにメッセージを無効にする機能があるのかはわかりませんでした。
まとめ
- typescript: File is a CommonJS module; it may be converted to an ES module. の解決方法について説明しました。
- 解決方法は２つあります。
  - CommonJSからESへ変換する
  - メッセージを非表示設定にする。（VSCodeのみ）
- ただ、エラーなどかならず対処しないといけないメッセージではないので、無視して進めるのが結局は良いかと思います。

Discussion