解决 Next.js 编译错误：Unexpected token ‘export’ 的问题

在使用 Next.js 进行前端开发时，可能会遇到这样的编译错误：Unexpected token ‘export’，这是因为默认情况下 Next.js 不支持 import/export 语法的原因。在本文中，我们将解释这个问题的原因，并展示如何解决这个错误。

问题分析

在项目中使用 import/export 语法是很常见的，但是在 Next.js 项目中，如果直接使用这种语法，就会出现 Unexpected token ‘export’ 这样的错误。这是因为默认情况下，Next.js 是不支持这些语法的，它是基于 CommonJS 语法的。

具体来说，Next.js 使用了自己的 Babel 配置，而这个配置并没有包含支持 import/export 语法的插件。因此，如果直接使用这些语法，就会出现编译错误。

解决方案

下面介绍两种解决方案：

方案一：使用@babel/plugin-transform-modules-commonjs 插件

第一种解决方案是使用@babel/plugin-transform-modules-commonjs 插件来转换 import/export 语法，将其转换为 CommonJS 语法。这个插件可以在 Babel 配置文件中添加，比如在 .babelrc 文件中添加以下代码：

{
  "presets": ["next/babel"],
  "plugins": [
    ["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]
  ]
}

这个插件的作用是将 import/export 语法转换为 CommonJS 语法，这样就可以在 Next.js 中使用了。

方案二：使用 next-transpile-modules 插件

第二种解决方案是使用 next-transpile-modules 插件。这个插件可以让 Next.js 支持 import/export 语法，而无需手动转换代码。使用这个插件只需要安装它，并在 next.config.js 文件中添加以下代码：

const withTM = require('next-transpile-modules')(['module-a', 'module-b']);

module.exports = withTM({
  webpack(config, options) {
    return config;
  },
});

这个插件的作用是将指定的模块转换为 CommonJS 语法，这样就可以在 Next.js 中使用 import/export 语法了。需要注意的是，这里需要把需要使用 import/export 语法的模块列出来。

结论

在 Next.js 项目中使用 import/export 语法时，可能会出现编译错误。这篇文章介绍了两种解决方案：使用@babel/plugin-transform-modules-commonjs 插件和使用 next-transpile-modules 插件。虽然使用@babel/plugin-transform-modules-commonjs 插件需要手动转换代码，但是它比较灵活，并且可以支持更多的场景。而使用 next-transpile-modules 插件则更加简单，只需要安装并配置即可。使用哪种方案，取决于具体的情况。

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