🎴

「Line 0: Parsing error: Cannot read property」対処法

2020/10/20に公開

結論

  • typescript v3.8以上にアップデート(もしくは2.23.0にダウングレード)
 yarn upgrade --latest (特に考えなくていいならlatest)
  • node_moduleフォルダを削除
  • node_moduleを再インストール
 yarn install

[ 参考 ]
https://github.com/typescript-eslint/typescript-eslint/issues/1746
https://pauledenburg.com/line-0-parsing-error-cannot-read-property-map-of-undefined/

どんなときに起きるのか

Reactでコンポーネントを作成するとき、例えばButtonに関するファイルを以下のようにまとめたとします。

Button
├── Button.stories.tsx
├── Button.tsx
└── index.ts

Button.tsx は次のように、ButtonPropsとButtonをexportしています。

//Button.tsx
 export type ButtonProps = {...}
 export const Button:React.FC<ButtonProps> = (...) =>{...}

このとき、import文は以下のように書きたいので

//sample.tsx
 import {Button, ButtonProps} form "./Button";

index.tsはこのように記述します。

//index.ts
 export * form "./Button";

しかし、typescriptのバージョンが3.7以前の場合、表題のコンパイルエラーが発生します。

Line 0: Parsing error: Cannot read property 'XXXX' of undefined

エラー文でぐぐったらgithubのissueがすぐ見つかるので、簡単に解決しそうな問題ですが、自分の場合node_moduleを削除して再インストールをしないといけない、ということに気が付かずハマってしまいました。。。
どこかで、同じ境遇にあっている人の助けになりますように。

Discussion