正则中的Unicode属性转义在Babel中报错，如何解决？

为什么会报错？ #

这不是Babel的bug，而是Next.js 12默认的Babel配置没完全支持ES2018引入的Unicode Property Escapes特性。像\p{Regional_Indicator}、\p{Emoji_Modifier}这类属性，需要特定的Babel插件来解析，而Next.js 12默认没启用这个插件，哪怕你用的@babel/runtime是7.17.7也没用。

怎么让Unicode属性转义正常工作？ #

1. 安装对应Babel插件并配置 #

• 先安装插件：

  npm install --save-dev @babel/plugin-proposal-unicode-property-regex
  

• 在项目根目录创建.babelrc或babel.config.js文件，添加配置：

  module.exports = {
    presets: ['next/babel'],
    plugins: ['@babel/plugin-proposal-unicode-property-regex']
  };
  

  这个插件专门处理Unicode属性转义的正则，和你当前的@babel版本兼容，无需额外调整版本。

2. 检查Node.js版本 #

Next.js 12.1.6要求Node.js至少12.22.0，但老版本Node对Unicode属性转义的支持不全，建议升级到16.x LTS版本，确保运行时能正确识别这些正则属性。

3. 确认正则写法正确 #

拆分复合emoji的正则要写对，还要加上u（Unicode模式）和g（全局匹配）标志，示例：

const emojiRegex = /\p{Emoji}(?:\p{Emoji_Modifier}|\p{Emoji_Component}|\p{Emoji_Combining_Mark})*/gu;
const emojiArray = '🇨🇳😀👍🏿'.match(emojiRegex);
// 输出: ['🇨🇳', '😀', '👍🏿']

这两个标志是Unicode属性转义生效的必要条件，别遗漏。

额外提示 #

如果配置后仍有问题，检查next.config.js里是否有自定义转译规则，避免覆盖Babel插件的配置。另外，若后续有升级计划，Next.js 13及以上版本对ES新特性支持更完善，能从根源上解决这类兼容问题。

内容的提问来源于stack exchange，提问作者jost21