When using express in @nuxt/bridge, "handle is not a function" is displayed.

Environment

• Operating System: Darwin
• Node Version: v16.11.0
• Nuxt Version: 2.16.0-27336975.777a4b7f
• Package Manager: npm@8.0.0
• Bundler: Webpack
• User Config: server, render, publicRuntimeConfig, head, router, build, plugins, loading, css, typescript, manifest, buildModules, i18n, axios, serverMiddleware, bridge
• Runtime Modules: -
• Build Modules: @nuxt/bridge@3.0.0-27336769.5a7a979, 8n, @nuxtjs/axios@5.13.6, @nuxtjs/pwa@3.3.5, @nuxtjs/vuetify@1.12.3

Reproduction

/api/index.ts

import express from 'express';
import { someFunction } from './some-function';

const app = express();
app.get('/sample_api', async (req, res) => {
  const url = req?.query.url as string;
  const id = req?.query.id as string;

  if (!url) throw new Error('Error message');
  if (!id) throw new Error('Error message.');

  const result = await someFunction(url, id);

  res.send(result);
});

export default {
  path: '/api',
  handler: app,
}

Describe the bug

When I run npm run dev, I get the following bug

handle is not a function
  at file://./node_modules/h3/dist/index.mjs:113:24  
  at new Promise (<anonymous>)  
  at callHandle (file://./node_modules/h3/dist/index.mjs:110:10)  
  at file://./node_modules/h3/dist/index.mjs:106:12  
  at file://./node_modules/h3/dist/index.mjs:134:34  
  at processTicksAndRejections (node:internal/process/task_queues:96:5)  
  at async handle (file://./node_modules/h3/dist/index.mjs:601:19)

Additional context

No response

Logs

No response

[ShaggyTech]

@pi0 I have this repo. I’ve just been experimenting, just seeing what works and what breaks in certain ways. I think there is an open issue regarding child Pages running twice and that be part of my issue. Again I’m probably not understanding some core concepts but I’m getting there. I recently discovered the discussions part of this repo and had a read through this thread. It’s given me some new information that I think will help me and may help ryoto-kubo as well.

[ShaggyTech]

Instead of this:

/api/index.ts

import express from 'express';
import { someFunction } from './some-function';

const app = express();
app.get('/sample_api', async (req, res) => {
  const url = req?.query.url as string;
  const id = req?.query.id as string;

  if (!url) throw new Error('Error message');
  if (!id) throw new Error('Error message.');

  const result = await someFunction(url, id);

  res.send(result);
});

export default {
  path: '/api',
  handler: app,
}

Do this instead and just export the express app as default:

import express from 'express';
import { someFunction } from './some-function';

const app = express();
app.get('/sample_api', async (req, res) => {
  const url = req?.query.url as string;
  const id = req?.query.id as string;

  if (!url) throw new Error('Error message');
  if (!id) throw new Error('Error message.');

  const result = await someFunction(url, id);

  res.send(result);
});

export default app

The endpoint in this case would be /api/sample_api

BTW, I’ve been down a week long rabbit hole trying to figure this out, I’m still learning so there might be a better way of doing it. I haven’t had any luck putting express middleware in the server/middleware folder, for some reason multiple responses get sent to the client when visiting the homepage and I get the Error Cannot set headers after they are sent to the client.