Rollup failed to resolve import "firebase/app" from "resources/js/firebase.js"

[sumer5020]

I have vue3 project that use firebase notification, When I moved from MIX to Vite I find this issue:

[vite]: Rollup failed to resolve import "firebase/app" from "resources/js/firebase.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "firebase/app" from "resources/js/firebase.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

my app.js like the following:

import {messaging, token} from "./firebase";

and my firebase.js:

import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";

const firebaseConfig = {
    apiKey: "XXXXXXXXXXXXXXXXXXX_XXXXXXXXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXX-XXXXXXXXXXX.XXXXXXX.XXX",
    projectId: "XXXXXXXXX-XXXXX",
    storageBucket: "XXXXXXXXXX.XXXXXXXXXx.XXX",
    messagingSenderId: "XXXXXXXXXXXXXXX",
    appId: "X:XXXXXXXXXXXXXX:XXX:XXXXXXXXXXXXXXXXXXXXX",
    measurementId: "X-XXXXXXXXXXXX"
}

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Firebase Cloud Messaging and get a reference to the service
export const messaging = getMessaging(app);
export const token = getToken;
export default messaging;