react-hook-form设置可选默认值报错：模块解析失败需适配加载器

问题根源 #

报错指向代码中的noteToEdit?.title可选链操作符?.，这是ES2020新增的语法特性。模块解析失败说明你的项目构建工具（如Webpack+Babel）未配置支持ES2020及以上版本的语法转换，导致无法识别该语法。

解决办法 #

办法1：替换为兼容语法 #

如果暂时不想调整构建配置，可将可选链写法替换为传统条件判断：

const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<NoteInput>({
    defaultValues:{
        title: noteToEdit ? noteToEdit.title : "",
        text: noteToEdit ? noteToEdit.text : "",
    }
});

办法2：配置Babel支持可选链 #

1. 安装Babel可选链插件：

npm install @babel/plugin-proposal-optional-chaining --save-dev

2. 在Babel配置文件（.babelrc或babel.config.json）中添加该插件：

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

若使用@babel/preset-env，可通过设置目标环境自动启用兼容转换：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "not ie <= 10"]
      }
    }]
  ]
}

办法3：调整TypeScript配置（若使用TS） #

在tsconfig.json中设置编译目标为ES2020及以上，确保TypeScript编译时输出兼容的代码：

{
  "compilerOptions": {
    "target": "ES2020",
    // 其他配置项...
  }
}

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