TypeError: GoogleProvider is not a function when running with .ts script using tsx

For isolation purposes, the error occurs when calling the getServerSession() function from a .ts script using the command "dotenv tsx ./tests/scripts/mock.ts"
import { getServerAuthSession } from "~/server/auth";

getServerAuthSession();
import { getServerAuthSession } from "~/server/auth";

getServerAuthSession();
The getServerAuthSession function is defined as a helper function in ~/server/auth.ts And the full error output is:
> dotenv tsx ./tests/scripts/mock.ts

/Users/*****/Repos/product/src/server/auth.ts:79
GoogleProvider({
^


TypeError: GoogleProvider is not a function
at <anonymous> (/Users/*****/Repos/product/src/server/auth.ts:79:5)
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)

Node.js v19.9.0
> dotenv tsx ./tests/scripts/mock.ts

/Users/*****/Repos/product/src/server/auth.ts:79
GoogleProvider({
^


TypeError: GoogleProvider is not a function
at <anonymous> (/Users/*****/Repos/product/src/server/auth.ts:79:5)
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)

Node.js v19.9.0
"dependencies": {
"@auth/drizzle-adapter": "^0.3.6",
"@planetscale/database": "^1.11.0",
"@t3-oss/env-nextjs": "^0.7.1",
"@tanstack/react-query": "^4.36.1",
"@trpc/client": "^10.43.6",
"@trpc/next": "^10.43.6",
"@trpc/react-query": "^10.43.6",
"@trpc/server": "^10.43.6",
"drizzle-orm": "^0.28.5",
"next": "^14.0.3",
"next-auth": "^4.24.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"server-only": "^0.0.1",
"stripe": "^14.8.0",
"superjson": "^2.2.1",
"vite-tsconfig-paths": "^4.2.1",
"zod": "^3.22.4"
},
"devDependencies": {
"@next/eslint-plugin-next": "^14.0.3",
"@types/eslint": "^8.44.7",
"@types/node": "^18.17.0",
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"@typescript-eslint/eslint-plugin": "^6.11.0",
"@typescript-eslint/parser": "^6.11.0",
"autoprefixer": "^10.4.14",
"dotenv-cli": "^7.3.0",
"drizzle-kit": "^0.19.3",
"eslint": "^8.54.0",
"mysql2": "^3.6.1",
"postcss": "^8.4.31",
"prettier": "^3.1.0",
"prettier-plugin-tailwindcss": "^0.5.7",
"tailwindcss": "^3.3.5",
"tsx": "^4.6.2",
"typescript": "^5.1.6",
"vitest": "^0.34.6"
},
"dependencies": {
"@auth/drizzle-adapter": "^0.3.6",
"@planetscale/database": "^1.11.0",
"@t3-oss/env-nextjs": "^0.7.1",
"@tanstack/react-query": "^4.36.1",
"@trpc/client": "^10.43.6",
"@trpc/next": "^10.43.6",
"@trpc/react-query": "^10.43.6",
"@trpc/server": "^10.43.6",
"drizzle-orm": "^0.28.5",
"next": "^14.0.3",
"next-auth": "^4.24.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"server-only": "^0.0.1",
"stripe": "^14.8.0",
"superjson": "^2.2.1",
"vite-tsconfig-paths": "^4.2.1",
"zod": "^3.22.4"
},
"devDependencies": {
"@next/eslint-plugin-next": "^14.0.3",
"@types/eslint": "^8.44.7",
"@types/node": "^18.17.0",
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"@typescript-eslint/eslint-plugin": "^6.11.0",
"@typescript-eslint/parser": "^6.11.0",
"autoprefixer": "^10.4.14",
"dotenv-cli": "^7.3.0",
"drizzle-kit": "^0.19.3",
"eslint": "^8.54.0",
"mysql2": "^3.6.1",
"postcss": "^8.4.31",
"prettier": "^3.1.0",
"prettier-plugin-tailwindcss": "^0.5.7",
"tailwindcss": "^3.3.5",
"tsx": "^4.6.2",
"typescript": "^5.1.6",
"vitest": "^0.34.6"
},
4 Replies
ott
ott11mo ago
Does it need to be .tsx, afaik GoogleProvider is a react component
Brycycle
Brycycle11mo ago
I was able to resolve this issue by writing in the full function definition of GoogleProvider defined in next-auth/providers/google into the ~/server/auth.ts file, like so.
import type { OAuthConfig, OAuthUserConfig } from "next-auth/providers/oauth";
import type { GoogleProfile } from "next-auth/providers/google";

function GoogleProvider<P extends GoogleProfile>(
options: OAuthUserConfig<P>,
): OAuthConfig<P> {
return {
id: "google",
name: "Google",
type: "oauth",
wellKnown: "https://accounts.google.com/.well-known/openid-configuration",
authorization: { params: { scope: "openid email profile" } },
idToken: true,
checks: ["pkce", "state"],
profile(profile) {
return {
id: profile.sub,
name: profile.name,
email: profile.email,
image: profile.picture,
};
},
style: { logo: "/google.svg", bg: "#fff", text: "#000" },
options,
};
}
import type { OAuthConfig, OAuthUserConfig } from "next-auth/providers/oauth";
import type { GoogleProfile } from "next-auth/providers/google";

function GoogleProvider<P extends GoogleProfile>(
options: OAuthUserConfig<P>,
): OAuthConfig<P> {
return {
id: "google",
name: "Google",
type: "oauth",
wellKnown: "https://accounts.google.com/.well-known/openid-configuration",
authorization: { params: { scope: "openid email profile" } },
idToken: true,
checks: ["pkce", "state"],
profile(profile) {
return {
id: profile.sub,
name: profile.name,
email: profile.email,
image: profile.picture,
};
},
style: { logo: "/google.svg", bg: "#fff", text: "#000" },
options,
};
}
This, will throw a different error when directly calling getServerAuthSession from a script, but it resolves the TypeError in my actual use case, seen here:
import { createInnerTRPCContext } from "~/server/api/trpc";
import { mockEndUserSession } from "../setup/test-mocks";
import { appRouter } from "~/server/api/root";
const endUserContext = await createInnerTRPCContext({
session: mockEndUserSession,
});

export const endUserCaller = appRouter.createCaller(endUserContext);
import { createInnerTRPCContext } from "~/server/api/trpc";
import { mockEndUserSession } from "../setup/test-mocks";
import { appRouter } from "~/server/api/root";
const endUserContext = await createInnerTRPCContext({
session: mockEndUserSession,
});

export const endUserCaller = appRouter.createCaller(endUserContext);
Brycycle
Brycycle11mo ago
I haven't been able to figure out what about the function being defined in next-auth/providers/google causes this error. From my understanding ESM supports default exports, which is what the npm package tsx is able to compile. https://github.com/privatenumber/tsx#readme
GitHub
GitHub - privatenumber/tsx: ⚡️ TypeScript Execute: Node.js enhanced...
⚡️ TypeScript Execute: Node.js enhanced to run TypeScript & ESM - GitHub - privatenumber/tsx: ⚡️ TypeScript Execute: Node.js enhanced to run TypeScript & ESM
Brycycle
Brycycle11mo ago
converting the file to a .tsx produces the same error sadly.
Want results from more Discord servers?
Add your server