kz’s blog

興味のあることについて書いていきます。

Vue.js で Firebase を利用するときに警告が出た場合の対処法

警告が出る場合

import firebase from "firebase";

このようにimportすると下記のような警告が出力されます。

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

Typescript:
import * as firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

対処法

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/database";
import "firebase/firestore";

警告に書いてある通り、import firebase from "firebase";import firebase from "firebase/app";にし、使用したいアプリを更にimportすることで警告を消すことができました。

上記は、Authentication, Realtime Database, Cloud Firestoreを使用する場合です。