Expiration of the request when hosted on Firebase / Route Handlers POST

[slecoustre]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.15.0
      npm: 9.5.0
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.4-canary.0
      eslint-config-next: 13.4.3
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/slecoustre-vulog/bug-route-handler

To Reproduce

index.js

const {
    https: { onRequest },
    scheduler: { onSchedule },
    logger,
} = require('firebase-functions/v2');
const { initializeApp } = require('firebase-admin/app');
const next = require('next');
const https = require('https');
const tools = require('normalize-diacritics');
const { parse } = require('url');
const LRU = require('lru-cache');

initializeApp();

const nextConfig = require('./next.config');

const nextAppsLRU = new LRU({
    // TODO tune this
    max: 3,
    allowStale: true,
    updateAgeOnGet: true,
    dispose: (server) => {
        server.close();
    },
});

exports.web = onRequest(
    {
        concurrency: 300,
        region: 'europe-west1',
        minInstances: 1,
        memory: '1GiB', // '512MB',
    },
    async (req, res) => {
        const { hostname, protocol, url } = req;
        const port = protocol === 'https' ? 443 : 80;
        const key = [hostname, port].join(':');

        let nextApp = nextAppsLRU.get(key);
        if (!nextApp) {
            nextApp = next({
                ...nextConfig,
                dir: process.cwd(),
                hostname,
                port: process.env.NODE_ENV === 'development' ? 5001 : port,
            });
            nextAppsLRU.set(key, nextApp);
        }

        await nextApp.prepare();
        const parsedUrl = parse(url, true);

        await nextApp.getRequestHandler()(req, res, parsedUrl);
    }
);

src/app/api/route.ts

import { NextRequest, NextResponse } from 'next/server';

export const GET = () => NextResponse.json({ message: 'Hello, world!' });
export const POST = async (req: NextRequest) => NextResponse.json({ message: 'Hello, world!', body: await req.json() });

Describe the Bug

During development everything works fine (npm run dev) but when you build and execute everything in firebase it doesn't work anymore.

but the same development worked very well in version 13.2.

in version :

• 13.4.2, I have the error: TypeError: Response body object should not be disturbed or locked
• canary, I have a timeout of 60s

If there is no Body then it works very well.

Expected Behavior

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1590

[ameddin73]

seeing this in 13.3.4, too

[miketdonahue]

EDIT: My fault, this issue clearly states that this particular problem happens in prod. I am only in dev at the moment.

[Original comment redacted]

[slecoustre-vulog]

Yes, it's the body that poses the problem, whatever the method.

[slecoustre-vulog]

This is a major blocker, any progress on this?

[ameddin73]

Firebase response here.

[n00dl3s]

I have having the same issue using this repo, https://github.com/saleor/nextjs-commerce.

The DELETE request

Component:

const response = await fetch(/api/cart, {
method: 'DELETE',
body: JSON.stringify({
lineId: item.id
})
});

Route:

export async function DELETE(req: NextRequest): Promise {
const cartId = cookies().get('cartId')?.value;
const { lineId } = await req.json();

if (!cartId || !lineId) {
return NextResponse.json({ error: 'Missing cartId or lineId' }, { status: 400 });
}
try {
await removeFromCart(cartId, [lineId]);
return NextResponse.json({ status: 204 });
} catch (e) {
if (isVercelCommerceError(e)) {
return NextResponse.json({ message: formatErrorMessage(e.message) }, { status: e.status });
}

return NextResponse.json({ status: 500 });
}
}

[reza-ebrahimi]

Same issue regardless of Firebase, I think this is only happening in using DELETE method.

[AlexBrasileiro]

Any updates? 🥺

[AlexBrasileiro]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.15.0
      npm: 9.5.0
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.4-canary.0
      eslint-config-next: 13.4.3
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/slecoustre-vulog/bug-route-handler

To Reproduce

index.js

const {
    https: { onRequest },
    scheduler: { onSchedule },
    logger,
} = require('firebase-functions/v2');
const { initializeApp } = require('firebase-admin/app');
const next = require('next');
const https = require('https');
const tools = require('normalize-diacritics');
const { parse } = require('url');
const LRU = require('lru-cache');

initializeApp();

const nextConfig = require('./next.config');

const nextAppsLRU = new LRU({
    // TODO tune this
    max: 3,
    allowStale: true,
    updateAgeOnGet: true,
    dispose: (server) => {
        server.close();
    },
});

exports.web = onRequest(
    {
        concurrency: 300,
        region: 'europe-west1',
        minInstances: 1,
        memory: '1GiB', // '512MB',
    },
    async (req, res) => {
        const { hostname, protocol, url } = req;
        const port = protocol === 'https' ? 443 : 80;
        const key = [hostname, port].join(':');

        let nextApp = nextAppsLRU.get(key);
        if (!nextApp) {
            nextApp = next({
                ...nextConfig,
                dir: process.cwd(),
                hostname,
                port: process.env.NODE_ENV === 'development' ? 5001 : port,
            });
            nextAppsLRU.set(key, nextApp);
        }

        await nextApp.prepare();
        const parsedUrl = parse(url, true);

        await nextApp.getRequestHandler()(req, res, parsedUrl);
    }
);

src/app/api/route.ts

import { NextRequest, NextResponse } from 'next/server';

export const GET = () => NextResponse.json({ message: 'Hello, world!' });
export const POST = async (req: NextRequest) => NextResponse.json({ message: 'Hello, world!', body: await req.json() });

Describe the Bug

During development everything works fine (npm run dev) but when you build and execute everything in firebase it doesn't work anymore.

but the same development worked very well in version 13.2.

in version :

• 13.4.2, I have the error: TypeError: Response body object should not be disturbed or locked
• canary, I have a timeout of 60s

If there is no Body then it works very well.

Expected Behavior

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

@slecoustre If you may ask, why did you create this Cloud Functions web? Does it help you with something when you run next in a Dev or Production environment? 🧐 Thank you in advance :)

[slecoustre-vulog]

@AlexBrasileiro
firebase's "Integrate web framework" feature does the same thing i did. but in my project i need to have several functions (scheduler, ...). so i wrote this feature. but i tried a lambda project with the "Integrate web framework" feature and i have the same problem.

when i'm in dev (localhost and npm run dev), the code works fine. but as soon as it's hosted by firebase, emulator (dev or prod) or online (prod), i have the same problem.

[AlexBrasileiro]

@slecoustre-vulog got it! Thanks a lot for the explanation, actually you wrote your own "version" of firebase's "Integrate web framework" feature and added more elements to the function. I didn't know this was possible, I thought we didn't have the freedom to change the SSR function that Firebase automatically creates. Thank you very much :)

[slecoustre-vulog]

@vual The only solution I've found so far to avoid redoing all the code for the POST, DELETE ... APIs is to use expressjs and process the calls.
Post(pattern) => custom handler
** => Nextjs handler

[slecoustre-vulog]

@vual

const makeExpressApp = (): Express => {
    const server = express();
    server.use(cookieParser());
    server.use(cookieParser());

        server.post('/api/....',(req,res)=> {
        //.... Call already written code (import)
        });


    server.all('*', async (req: Request, res: Response) => {
        try {
            const { hostname, protocol, url } = req;
            const port = protocol === 'https' ? 443 : 80;
            const key = [hostname, port].join(':');

            let nextApp = nextAppsLRU.get(key);
            if (!nextApp) {
                nextApp = createServer({
                    ...nextConfig,
                    dir: process.cwd(),
                    hostname,
                    port: process.env.NODE_ENV === 'development' ? 5001 : port,
                });
                nextAppsLRU.set(key, nextApp);
            }

            await nextApp.prepare();
            const parsedUrl = parse(url, true);

            nextApp.getRequestHandler()(req, res, parsedUrl);
        } catch (error: any) {
            logger.error({ error, req, msg: error.message, stack: error.stack });
            res.status(500).send('Internal Server Error');
        }
    });
    return server;
};

export const web: HttpsFunction = onRequest(
    {
        concurrency: 300,
        region: 'europe-west1',
        minInstances: 1,
        memory: '1GiB', // '512MB',
    },
   (req: Request, res: Response) => {
      const { hostname, protocol } = req;
      const port = protocol === 'https' ? 443 : 80;
      const key = [hostname, port].join(':');
  
      let server = expressAppsLRU.get(key);
      if (!server) {
          server = makeExpressApp();
          expressAppsLRU.set(key, server);
      }
      server(req, res);
  }
);