0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Firebase】ローカルで起動できないときの応急処置【UNSUPPORTED_DIR_IMPORT】

Posted at

こんにちは。駆け出しフロントエンジニアの初投稿です。
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の練習も兼ねて備忘録として残していこうと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?