webpack + firebase 環境で「Error: Can't resolve '@firebase/firestore'」になった時の対応

はじめに

webpack の resolve.alias をよく使う場合に遭遇するんじゃないかなってエラーの対処?法です。
firebase を使い始めて躓いた点を Qiita に残しておきます。

この躓きで時間浪費した。。
firebase に関わらず同じエラーになる人世界に1人はいるんじゃないだろうかってお気持ちで書いてますが
多分みんなすぐ解決してる(or こんな事しない)んやろなぁって不安に思いながら手を動かしています。。

どんな時に発生したのか？

import がある時、自分の場合は

• import 時に ../../foo/bar となるのが好みじゃない
• alias は @foo みたいな名前でまとまりごとに alias を作る

みたいな事を普段考えています。
(@components @repositories みたいな)

firebase を使い始めたときも同じことを考えていました。

firebase を組み込んで firestore を使う場合は、

import firebase from 'firebase'
import firebaseConfig from './firebaseConfig'

const firebaseApp = firebase.initializeApp(firebaseConfig)
const db = firebaseApp.firestore()

export default db

みたいなのを書くと思いますが、
このファイルパスへの alias を @firebase としてしまうと、

ERROR in ./node_modules/firebase/dist/index.cjs.js
Module not found: Error: Can't resolve '@firebase/firestore' in '/(省略)/node_modules/firebase/dist'

みたいに firebase の main ファイルで module not found エラーを吐きます。

原因

これは、 firebase JS SDK の各コンポーネントが、 @firebase/firestore や @firebase/auth みたいな名前になっていて、 firebase がそれらを参照しており、 それらを bundler が alias と認識してしまうのだと思っています。(多分。。！！)

本来は node_modules/firebase/firestore や node_modules/firebase/auth などを require('@firebase/firestore') みたいに読み込んでいるのですが、
自分の alias で設定している path を見に行ってそうという感じ。。
(※ import は ESM, require は CJS)

firestore component
firebase main

解決した方法

@firebase という alias を諦めました。。
別の名前で alias をつけると問題なく解決してくれるようになりました。

最後に

webpack わからなすぎてこれで良いのかわからない。。
多分変に alias 使わなければ良いんだろうなーという感触。

ディレクトリ構成とかいい感じにクリーンにしとけば、 alias 使わなくても気にならないようになるんかなー。。
実際のところ 「Add import statement」 -> ... みたいにするから気にしすぎ感も(WebStorm)