こんにちは。駆け出しフロントエンジニアの初投稿です。
Firebaseを使った案件でnpm run dev
するとUNSUPPORTED_DIR_IMPORT
と出て起動できない症状が出ました。
解決した応急処置の方法を同じような犠牲者が出ないよう、また自分が地獄を見ないよう 備忘録として残しておきます。
※少し前の話なので記憶がおぼろげです
【経緯】
2ヶ月ほど前まで機能追加、バグ修正を行なっていた案件で久々に業務を始めようとしたところ、npm run dev
するとUNSUPPORTED_DIR_IMPORT
が表示されて何もできなくなった。
他のプロジェクトに参加している方の環境では問題なく、完全におま環
状態だった。
【解決に向けて試したこと】
- 他のブランチに切り替える
- nodeのバージョンを変更する(他のエンジニアさんの環境と合わせる)
- npmのバージョンを変更する(上記と同じ)
-
npm run dev --legacy-peer-deps
してみる - 正常なpackage.json、packagelock.jsonをもらって
npm install
する - 正常なpackage.json、packagelock.json、node_modulesをもらって置き換える(爆
他にもいくつも試したと思いますが、解決には至りませんでした。。
でば応急処置の方法です。
まず.babelrc
に以下を記載します
{
"presets": ["next/babel"]
}
次にnext.config.jsに
module.exports = {
swcMinify: false, //この記述を追加します。
};
最後にfirebase.tsに
import firebase from '@firebase/app';
import '@firebase/app';
import '@firebase/firestore';
import '@firebase/auth';
と記載するとnpm run devが通るようになります。
ただ、firebase.tsに波線が出てしまうので、あくまで応急処置です。
今後もMarkDownの練習も兼ねて備忘録として残していこうと思います。