I'm creating a svelte-kit app with typescript, so it's internally using vite.

And I'm using next-auth's facebook provider (even though next-auth is for react, it's internal features can be jerry-rigged).

I'm importing the provider with import FacebookProvider from 'next-auth/providers/facebook';. This correctly imports the default function during development.

But when I actually build, I get FacebookProvider is not a function error. Debugging shows that FacebookProvider is now { default: [Function: Facebook] }.

I've also tried import * as FB from 'next-auth/providers/facebook'; and try to use FB.default. Same thing happened FB.default is now { default: [Function: Facebook] } when I build, which is quite bizarre. There are 2 nested defaults now. Any idea what's happening here?

Since I'm using typescript, this seems like a problem with compiled output js files. My tsconfig is pretty barebone, mostly inheriting the defaults from svelte-kit.

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "baseUrl": ".",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "paths": {
          "$lib": ["src/lib"],
          "$lib/*": ["src/lib/*"]
        }
    },
    "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
}

I've also looked at the source. next-auth is also using typescript and is just using export default as usual. I've also looked at the compiled js file. The way it's exporting is like so -

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = Facebook;

Is there some known problem with import that I'm missing? Appreciate any help. Thanks!