Next.js Discord

Discord Forum

Getting an `Error: Unexpected token 'export'` using a Vercel Serverless Function in NextJS 13.2

Answered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
I essentially emulated this: https://github.com/Nutlope/twitterbio/tree/serverless in my own project, but I get the error mentioned in the title in my application log, i.e.

wait  - compiling...
event - compiled client and server successfully in 155 ms (266 modules)
Debugger attached.
Error: Unexpected token 'export'
Waiting for the debugger to disconnect...


This is the handler code I'm using, copied from a tutorial, so it should be right.

import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(
  request: NextApiRequest,
  response: NextApiResponse,
) {
  response.status(200).json({
    body: request.body,
    query: request.query,
    cookies: request.cookies,
    env: process.env.MY_SECRET,
  });
}


This is my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@api/*": [
        "./app/v1/api/*"
      ],
      "@v1/*": [
        "./app/v1/*"
      ],
      "@demo/*": [
        "./app/demo/*"
      ],
    },
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    ".next/page.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "sourceMap": true
}


This is happening for all of my Serverless Functions. I'm really having trouble figuring out what I haven't configured right. I feel like I'm so close... looking for some help on this.
Answered by alfon
https://nextjs.org/docs/pages/building-your-application/routing/api-routes#edge-api-routes
View full answer

46 Replies

alfon
i don't think this is how you create a API handler route in App routing
@alfon i don't think this is how you create a API handler route in `App` routing
joulev
see linked repo, it's the pages router
@joulev see linked repo, it's the pages router
alfon
mods can change the post's tag yk 😔
joulev
ohh i see, i never notice the tags tbh
app directory tag removed
but it's useless (from my pov) so i never look at the tag when answering
Cape lionOP
Thank you for taking a look at this @alfon and @joulev , however, I'm still not sure what I am supposed to change to make it work 😔

How I should create the API handler / where I should put it. I put my API handler under /api and my application code is under /app.
Cape lionOP
I'm using the /app dir
I saw in the official docs that by default they had the Serverless Function code under /api... although in the project I looked at, the code was under /pages/api
perhaps I am supposed to put the Serverless Function code / Edge Function code under /app/api?
@alfon
alfon
what im sure is that Serverless Function code or Edge Function code is anywhere in your app dir under the route.ts file
not sure about what happen in pages dir
ideally you shouldn't mix app dir and pages dir though (unless you are migrating)
Cape lionOP
got it! so there shouldn't be an /api and /app folder under the project root - the serverless / edge function code should be under /app
I guess that actually makes a lot more sense, I might have been looking at some old docs
Answer
alfon
you can also do Edge functions in Pages route
ALL API handler are serverless though
Cape lionOP
Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page. They are server-side only bundles and won't increase your client-side bundle size.
alfon
next.js is a serverless framework
Cape lionOP
this explains my issue
very very cool, yeah I get that now
but in app folder, route.ts can be colocated with other stuff
Cape lionOP
awesome, thank you so much
alfon
make sure you select the correct routing
since its like 2 different framework :v
Cape lionOP
😂
time to test this...
Cape lionOP
I'm getting a 405 Method Not Allowed 😔
I'm getting a 405 Method Not Allowed 😔
@Cape lion Click to see attachment
alfon
Read the docs man, thats not how you export the function
Cape lionOP
For anyone else who sees this - my confusion was from the fact that the information for creating a full /app Edge Function example is in a few different spots in the docs - here's a full example that works for me:
import { NextResponse } from 'next/server';

export const config = {
  runtime: 'edge',
};

export async function POST(request: Request) {
  return NextResponse.json({
    test: 'true'
  });
}
This is what you will see in Vercel when you check your deployments -> functions page:
If you don't include the 
export const config = {
  runtime: 'edge',
};

Then you end up with a non-edge function
Cape lionOP
again, ty @alfon and @joulev for taking a look at this! It was a simple solution after all for me.
joulev
So you’ve been using appdir after all, not pages dir huh
@joulev So you’ve been using appdir after all, not pages dir huh
Cape lionOP
Yeah, I was using code I found on the documentation for the pages version. I posted here that I was using the /app dir (was also in the paths in my tsconfig.json)
Im new to next but its making more and more sense, appreciate you taking a look at this
alfon
make sure you select the correct routing version when reading the docs