Next.js 项目启动报错："SyntaxError: Unexpected token 'export'" 的解决方法

如果你在启动 Next.js 项目时遇到了 "SyntaxError: Unexpected token 'export'" 的报错，不要惊慌，这个问题很常见，通常是由于项目中使用了不支持 ES6 的模块导入语法所导致的。本文将介绍这个问题的原因和解决方法，帮助你快速解决这个问题。

问题原因

Next.js 是一个基于 React 的服务端渲染框架，它支持使用 ES6 的模块导入语法。但是有些 Node.js 版本并不支持 ES6 的模块导入语法，这就导致了 "SyntaxError: Unexpected token 'export'" 的报错。这个问题通常出现在使用 Node.js 版本低于 13.x.x 的情况下。

解决方法

解决这个问题的方法很简单，只需要将 Node.js 的版本升级到 13.x.x 或更高版本即可。你可以使用 nvm 工具来管理你的 Node.js 版本，具体操作如下：

1. 安装 nvm 工具

如果你还没有安装 nvm 工具，可以按照以下步骤安装：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

安装完成后，重启终端。

1. 安装 Node.js 13.x.x 版本

使用以下命令安装 Node.js 13.x.x 版本：

nvm install 13

安装完成后，你可以使用以下命令来验证 Node.js 版本：

node -v

如果显示的版本号是 13.x.x，则说明安装成功。

1. 使用新版本的 Node.js 启动项目

使用以下命令来启动 Next.js 项目：

npm run dev

现在，你的 Next.js 项目应该已经成功启动了。

示例代码

下面是一个使用 ES6 的模块导入语法的示例代码：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => (
  <div>Hello, World!</div>
);

ReactDOM.render(<App />, document.getElementById('root'));

如果你使用的是 Node.js 版本低于 13.x.x，那么在启动项目时就会出现 "SyntaxError: Unexpected token 'export'" 的报错。如果你按照上述步骤升级了 Node.js 版本，那么这个问题就可以轻松解决了。

总结

在启动 Next.js 项目时遇到 "SyntaxError: Unexpected token 'export'" 的报错是一个常见问题，通常是由于使用了不支持 ES6 的模块导入语法所导致的。解决这个问题的方法很简单，只需要将 Node.js 的版本升级到 13.x.x 或更高版本即可。如果你遇到了这个问题，希望本文能够帮助到你。

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