Error: The function (0 , import_preact_render_to_string.renderToString) is not a valid function

Question

Error: The function (0 , import_preact_render_to_string.renderToString) is not a valid function

I am encountering an issue with my Express.js application when trying to integrate Auth.js. The API starts up fine, but when navigating beyond /api/auth, I receive a stack trace error without any logs in the console. Additionally, it redirects to /api/auth/error?error=Configuration

[auth][error] TypeError: (0 , import_preact_render_to_string.renderToString) is not a function
api:dev:at send (/Users/josh/projects/saas-starter-kit/node_modules/@auth/core/lib/pages/index.js:13:350)
api:dev:at Object.error (/Users/josh/projects/saas-starter-kit/node_modules/@auth/core/lib/pages/index.js:119:20)
api:dev:at AuthInternal (/Users/josh/projects/saas-starter-kit/node_modules/@auth/core/lib/index.js:31:31)
api:dev:at Auth (/Users/josh/projects/saas-starter-kit/node_modules/@auth/core/index.js:109:34)
api:dev:at <anonymous> (/Users/josh/projects/saas-starter-kit/node_modules/@auth/express/index.js:141:45)

Steps to reproduce:

tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",                           
    "module": "commonjs",                    
    "outDir": "./dist",                            
    "esModuleInterop": true,         
    "forceConsistentCasingInFileNames": true,  
    "strict": true,
    "skipLibCheck": true 
  }
}

index.ts

import { logger } from '@repo/logger'
import 'dotenv/config'
import { createServer } from './server'

const port = process.env.PORT || 3001
const server = createServer()

server.listen(port, async() => {
    logger.info(`api server is starting: Date: ${new Date()}`)
})

server.ts

import express, { type Express } from 'express'
import morgan from 'morgan'

import { ExpressAuth } from "@auth/express"
import GitHub from "@auth/express/providers/github"

export const createServer = (): Express => {
 const app = express()

 app
  .use(express.urlencoded({ extended: true }))
  .use(express.json())
  .set("trust proxy", true)
  .use("/api/auth/*", ExpressAuth({
    debug: true,
    trustHost: true,
    providers: [
      GitHub
    ],
   }))
    .get('/status', (_, res) => {
     return res.json({ ok: true })
    })


    return app
}

.env.local

AUTH_SECRET=""
AUTH_GITHUB_ID=""
AUTH_GITHUB_SECRET=""
AUTH_URL="http://localhost:3001/api/auth"

Command to start up

dotenvx run --env-file ./.env.local -- nodemon --exec \"node -r esbuild-register ./src/index.ts\" -e .ts

Expected behavior: I expected the signin page to load successfully instead of receiving a server console error message.

typescript express next-auth

Answer 1

Answer №1

My issue stemmed from the usage of a 'CommonJS' module in my project. Strangely enough, I'm not exactly sure how it was connected to the problem... but I found a workaround by implementing dynamic imports instead. Configuring TypeScript had become too complex for me, so I created an AuthJsDependencies loader to abstract these details away from my project. Here's an example of how I utilized it:

async function main() {
  const app = express()
  const authHandler = await AuthJsDependencies.load()
  app.use('/auth/*', authHandler) 
}

It's worth noting that this isn't the ideal async singleton pattern for loading dependencies. One peculiar aspect was the combination of CommonJS and dynamic imports. I came across a solution involving prevent typescript from transpiling dynamic imports into require(), which initially seemed impossible... but using eval actually worked for me.

import type { ExpressAuth } from "@auth/express";
import type Google from "@auth/express/providers/google";
import type SequelizeAdapter from "@auth/sequelize-adapter";

type Target = {
  ExpressAuth: typeof ExpressAuth;
  SequelizeAdapter: typeof SequelizeAdapter;
  Google: typeof Google;
};

export class AuthJsDependencies {
  private static target?: Target;

  public static async load() {
    if (!AuthJsDependencies.target) {
      AuthJsDependencies.target = await AuthJsDependencies._load();
    }

    return this.target!;
  }

  public static async _load() {
    const [
      { ExpressAuth },
      { default: SequelizeAdapter },
      { default: Google },
    ] = await Promise.all([
      eval('import("@auth/express")'),
      eval('import("@auth/sequelize-adapter")'),
      eval('import("@auth/express/providers/google")'),
    ]);

    return {
      ExpressAuth,
      SequelizeAdapter,
      Google,
    } as Target;
  }
}

Answer 2

My issue stemmed from the usage of a 'CommonJS' module in my project. Strangely enough, I'm not exactly sure how it was connected to the problem... but I found a workaround by implementing dynamic imports instead. Configuring TypeScript had become too complex for me, so I created an AuthJsDependencies loader to abstract these details away from my project. Here's an example of how I utilized it:

async function main() {
  const app = express()
  const authHandler = await AuthJsDependencies.load()
  app.use('/auth/*', authHandler) 
}

It's worth noting that this isn't the ideal async singleton pattern for loading dependencies. One peculiar aspect was the combination of CommonJS and dynamic imports. I came across a solution involving prevent typescript from transpiling dynamic imports into require(), which initially seemed impossible... but using eval actually worked for me.

import type { ExpressAuth } from "@auth/express";
import type Google from "@auth/express/providers/google";
import type SequelizeAdapter from "@auth/sequelize-adapter";

type Target = {
  ExpressAuth: typeof ExpressAuth;
  SequelizeAdapter: typeof SequelizeAdapter;
  Google: typeof Google;
};

export class AuthJsDependencies {
  private static target?: Target;

  public static async load() {
    if (!AuthJsDependencies.target) {
      AuthJsDependencies.target = await AuthJsDependencies._load();
    }

    return this.target!;
  }

  public static async _load() {
    const [
      { ExpressAuth },
      { default: SequelizeAdapter },
      { default: Google },
    ] = await Promise.all([
      eval('import("@auth/express")'),
      eval('import("@auth/sequelize-adapter")'),
      eval('import("@auth/express/providers/google")'),
    ]);

    return {
      ExpressAuth,
      SequelizeAdapter,
      Google,
    } as Target;
  }
}

Error: The function (0 , import_preact_render_to_string.renderToString) is not a valid function

Answer №1

Similar questions

Converting data received from the server into a typescript type within an Angular Service

What is the best way to implement an interface for accurately checking each prop type?

Utilizing Express and Multer for file uploads: receiving a file with a random name and unspecified format

Exploring the NestJS framework using mongoose schema, interfaces, and DTOs: A deep dive

I have successfully implemented useLazyQuery in a functional component, but now I am looking to integrate it into a class component. Can you provide guidance on how to achieve

Combining values in an Angular project to create a new object with the same properties using TypeScript

Utilizing Angular to Showcase Nested Properties in a Kendo Grid Column

Tips on invoking a child component's function from the parent component

Trouble with updating data in Angular 5 through page reload

Tips for transferring an object as a prop in React with the help of typescript

Manage text, PDF, and image files in a MEAN stack app by uploading and fetching them from a MongoDB database using

When I try to access localhost, it directs me to http://localhost:3000/myprofile%20 instead of localhost:/3000/myprofile

Internationalization in Angular (i18n) and the powerful *ngFor directive

Using Typescript to retrieve a property by its name using a string as a generic type

Leverage one Injectable service within another Injectable service in Angular 5

The API response indicates that the service is currently not accessible

Tips for performing a redirect in JavaScript/ReactJS without storing the redirection in the cache

Troubleshooting Problem with ES6 String Literals/Typescript in Chrome Developer Tools

What is the best way to automatically determine the type of a callback value based on a property within the same object?

PNG file is not displayed on React TSX page despite absence of any errors