在使用 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 文件中添加以下代码：
-
---------- ---------------
---------- -
-------------------------------------------- - ------------- ----- --
-
-这个插件的作用是将 import/export 语法转换为 CommonJS 语法，这样就可以在 Next.js 中使用了。
方案二：使用 next-transpile-modules 插件
第二种解决方案是使用 next-transpile-modules 插件。这个插件可以让 Next.js 支持 import/export 语法，而无需手动转换代码。使用这个插件只需要安装它，并在 next.config.js 文件中添加以下代码：
----- ------ - ---------------------------------------------- -------------
-------------- - --------
--------------- -------- -
------ -------
--
---这个插件的作用是将指定的模块转换为 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