[Vue.js]Firebaseの利用時にターミナルでエラー文が表示される

Question

https://www.youtube.com/watch?v=_n67scuq4QQ&t=166s

こちらの動画を参考にして、VueとFirebaseでTodoアプリを作成中にその31の02:00くらいの時の

import firebase from 'firebase'

this.db = firebase.firestore()

などを入力した後にエラーが表示されました。

ターミナルのエラー文

npm --version
8.1.0

npm run serve

 ERROR  Failed to compile with 2 errors                                                21:34:06

This dependency was not found:

* firebase in ./src/main.js, ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save firebase

コード全文

app.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

  <h1>TODO</h1>

  <div>
    <input v-model="NewTodoName"/>
    <button @click="addTodo()">追加</button>
  </div>

  <ul>
    <li>
      <input type="checkbox">
      タスク名
    </li>
    <button>X</button>
  </ul>
    
  </div>
</template>

<script>
import firebase from 'firebase'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  
  data(){
    return {
      db: null,
      todosRef: null,
      NewTodoName:''
    }
  },

  created(){
    this.db = firebase.firestore()
    this.todosRef = this.db.collection("todos")
  },

  methods: {
    addTodo(){
      if(this.NewTodoName === ''){ return }
      this.todosRef.add({
        name: this.NewTodoName,
        isComplete: false
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'



// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "$$",
  authDomain: "$$",
  projectId: "$$",
  storageBucket: "$$",
  messagingSenderId: "$$",
  appId: "$$"
};

// Initialize Firebase
initializeApp(firebaseConfig);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

pakage.json

{
  "name": "firebase",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "firebase": "^9.6.2",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

試したこと

https://qiita.com/massu159/items/4a08effbff720dfc107c

こちらを参考にver9のimport方法に書き換える

npm install --save firebase

は実行済み

https://firebase.google.com/docs/web/setup

こちらの記事を参考にして、main.jsを

import Vue from 'vue'
import App from './App.vue'



// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {

};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
db
// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

export default {getCities};

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

ともしてみましたが、うまく行きません。

Comments

[DKI]

npm add firebase
npm install --save firebase
も試しましたが、同じエラー文が表示されてしまいます