Next.js 转码码服务器文件出现 “SyntaxError: Unexpected token ‘export’” 该如何解决？

背景

在使用 Next.js 进行开发时，我们经常需要编写一些服务器端的代码，比如 API，中间件等等。而在 Next.js 中，服务器端的文件需要通过 Babel 进行转码后才能运行。然而，有时候我们会遇到这样的问题，就是在运行服务器端代码时报错 “SyntaxError: Unexpected token ‘export’”。

原因

这个错误一般是因为服务器端的代码是 ES6 模块化的，而 Node.js 的版本低于 13.x，没有完全支持 ES6 模块化导致的。在低版本的 Node.js 中，我们只能使用 CommonJS 规范的模块化方式。所以，当 Node.js 遇到 ES6 的 import/export 语法时，就会报语法错误。

解决方案

解决这个问题的方法有两种，分别是：

方法一：使用 Babel 进行转码

我们可以使用 Babel 把服务器端的代码转换成 CommonJS 规范的代码，再运行。具体步骤如下：

1. 安装 Babel 相关的依赖

npm install @babel/core @babel/register @babel/preset-env --save-dev

1. 在服务器端代码的入口文件中添加如下代码：

require('@babel/register')({
  presets: ['@babel/preset-env']
});

// 改成实际的服务器端代码文件路径
const server = require('./server.js');
server();

1. 在项目的根目录下添加一个 .babelrc 文件，配置 Babel 的转码规则

{
  "presets": ["@babel/preset-env"]
}

这样就可以完成代码的转码了。

方法二：升级 Node.js 版本

我们可以直接升级 Node.js 版本，来解决这个问题。Node.js 13.x 版本及以上已经原生支持 ES6 模块化导入导出语法了。具体步骤如下：

1. 到 Node.js 官网下载最新版本的 Node.js 安装包
2. 安装完成后，在命令行中输入 node -v 来查看 Node.js 的版本是否大于等于 13.x。如果是，那么问题就解决了。

示例代码

下面是一个使用 Babel 进行转码的示例：

1. 项目结构如下：

|-- src
|---- server.js
|-- .babelrc
|-- package.json

1. server.js 的代码如下：

-- -------------------- ---- -------
------ ------- ---- ----------

----- --- - ----------
----- ---- - -----

------------ ----- ---- -- -
  --------------- ---------
---

------ ------- -------- -- -
  ---------------- -- -- -
    ------------------- ----- -- ---------------
  ---
-

1. .babelrc 的代码如下：

{
  "presets": ["@babel/preset-env"]
}

1. package.json 中的 scripts 属性的代码如下：

{
  "scripts": {
    "start": "nodemon src/index.js --exec babel-node src/index.js"
  }
}

这样配置完成后，我们就可以通过 npm start 命令来启动服务器端的代码了。

总结

综上所述，要解决 Next.js 转码码服务器文件出现 “SyntaxError: Unexpected token ‘export’” 的问题，我们可以使用 Babel 进行转码，也可以升级 Node.js 版本。具体方法可以参考本文的示例代码。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65223c7d95b1f8cacd9a4b80