Theo's Typesafe Cult•9mo ago

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:

> product@0.1.0 mock
> 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

> product@0.1.0 mock
> 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•9mo ago

Does it need to be .tsx, afaik GoogleProvider is a react component

Brycycle•9mo 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•9mo 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•9mo ago

converting the file to a .tsx produces the same error sadly.

Gaming

Programming

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