Next.js error: Unexpected token 'export' for next/server.js-CodePudding

I am getting Unexpected token 'export' when trying to yarn dev my Nextjs project. Here is the error message I am getting (after running yarn build).

> Build error occurred
/Users/.../my-repo/node_modules/next/server.js:1
export { NextRequest } from 'next/dist/server/web/spec-extension/request'
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/.../my-repo/node_modules/@clerk/nextjs/dist/server/utils.js:5:18)
    at Module._compile (node:internal/modules/cjs/loader:1101:14) {
  type: 'SyntaxError'
}

This is what node_modules/next/server.js looks like in my project.

export { NextRequest } from 'next/dist/server/web/spec-extension/request'
export { NextResponse } from 'next/dist/server/web/spec-extension/response'

Also, here is next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    dirs: ["."],
  },
  poweredByHeader: false,
  trailingSlash: true,
  basePath: "",
  env: {
    PROJECT_NAME: process.env.PROJECT_NAME,
  },
  reactStrictMode: true,
};

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer(nextConfig);

I have already tried using next-transpile-modules, but this did not help. For reference, I am (and need to be) using v12.1.0 of next, so I can't take advantage of the in-built transpile support that v13.1 comes with.

What could the problem be?

CodePudding user response：

I think you're importing some components but you're using wrong syntax! You need to change export { NextRequest } from 'next/dist/server/web/spec-extension/request' to import { NextRequest } from 'next/dist/server/web/spec-extension/request' .

Please Check the Documentation for Further Information on NextJS Docs.

CodePudding user response：

The problem seems to be related to the version of Next.js that you are using. The error message is indicating that the "export" keyword is unexpected, which suggests that the version of Next.js that you have installed does not support the use of the "export" keyword.

It's recommended to update your Next.js to version 13.1 or higher, as it comes with in-built transpile support.

You could also try to use the next-transpile-modules package to transpile your code, but make sure to use version that compatible with your current version of Next.js

Another option is to use babel to transpile your code and configure your build process to use it when building your project.