<script>
    import firebase from "firebase/app";
</script>

I got the following error when trying to import a the firebase app node module in a svelte component.. how do I make it work..? I couldn't find literally anything online apart from this: https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module. I've tried doing mostly everything it says to do on how to import a module but nothing worked.. so I'm completely stuck.

[!] Error: 'default' is not exported by node_modules\firebase\app\dist\index.esm.js

Here's my rollup.config.js file:

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

export default {
    input: 'src/svelte.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
        svelte({
            dev: !production,
            css: css => { css.write('public/build/bundle.css'); }
        }),

        resolve({
            browser: true,
            dedupe: ['svelte'],
        }),
        commonjs(),

        !production && serve(),

        !production && livereload('public'),

        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

function serve() {
    let started = false;

    return {
        writeBundle() {
            if (!started) {
                started = true;

                require('child_process').spawn('npm', ['run', 'svelte-start', '--', '--dev'], {
                    stdio: ['ignore', 'inherit', 'inherit'],
                    shell: true
                });
            }
        }
    };
}

EDIT: Apparently, once I add this: external: ['firebase', 'firebase/app'] in the config export, the error goes away but, then I get a new error, this time it appears in the dev tools console:

svelte.js:8 Uncaught ReferenceError: firebase is not defined
    at svelte.js:8

svelte.js:

import App from './App.svelte';

const app = new App({
    target: document.body,
    props: {
        name: 'world'
    }
});

export default app;

And then some more logs in the VSC console:

[svelte-dev] (!) Missing global variable name
[svelte-dev] Use output.globals to specify browser global variable names corresponding to external modules  
[svelte-dev] firebase/app (guessing 'firebase')