Nuxt项目如何正确配置引入@babel/plugin-proposal-optional-chaining插件

你出现Webpack配置校验报错的核心原因是Babel插件的配置层级有误。build.plugins是webpack专属的插件配置项，要求传入的是webpack插件实例，你将Babel语法插件直接放在该位置，不符合webpack的配置规则，因此触发报错。

正确配置方案 #

1. 先安装对应开发依赖
   根据你使用的包管理工具执行对应命令：

# npm
npm install @babel/plugin-proposal-optional-chaining -D
# pnpm
pnpm add @babel/plugin-proposal-optional-chaining -D
# yarn
yarn add @babel/plugin-proposal-optional-chaining -D

2. 调整nuxt.config.js配置层级
   将Babel插件移动到build.babel.plugins配置项内，正确配置如下：

build: {
  transpile: [/^element-ui/],
  babel: {
    presets () {
      return [
        ['@nuxt/babel-preset-app'],
        ['@babel/preset-env'],
      ];
    },
    // Babel相关插件统一放在该配置项下
    plugins: ['@babel/plugin-proposal-optional-chaining']
  },
  // 此处为webpack插件配置区，不要放置Babel语法插件
}

注意事项 #

• 如果你使用的是Nuxt 2.15及以上版本，@nuxt/babel-preset-app已经默认内置了可选链、空值合并运算符等ES新语法的支持，不需要额外安装该插件，你可以直接删除相关配置后尝试使用语法，检查是否已经生效。
• 配置修改完成后，建议删除项目根目录下的.nuxt缓存文件夹，再重启开发服务，避免旧缓存导致配置不生效。

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