React代码解析错误排查：export App3语句报错

嘿，我一眼就发现问题所在了——你最后一行的导出语法不符合ES模块的规范，这才导致了解析错误。

错误原因 #

你写的export App3;是无效的ES模块导出语法：

• 如果要做默认导出（一个文件通常默认导出一个主组件），必须显式加上default关键字；
• 如果要做命名导出（一个文件导出多个组件/函数时用），要么在定义函数时就添加export前缀，要么用export { App3 };这种解构式的导出语句。
  解析器看到export App3;时，预期会看到{（比如命名导出的解构语法），所以才抛出了Unexpected token, expected "{"的错误。

两种修正方案 #

根据你的代码场景，推荐以下两种改法：

方案1：改成默认导出（最常用）

直接修改最后一行的导出语句：

export default App3;

之后导入这个组件时，就可以用：

import App3 from './你的文件名';

方案2：改成命名导出（适合多组件导出的文件）

要么在定义函数时直接加export：

export function App3() {
  const data = useCustomHook();
  return (
    <>
      <h1> Hello {data.currState}</h1>
      <button type="button" onClick={data.customHandleIncrement}>
        Increment
      </button>
    </>
  );
};

要么保持函数定义不变，修改导出语句为：

function App3() {
  // 原组件内容
};
export { App3 };

这种方式导入时需要用解构语法：

import { App3 } from './你的文件名';

针对你代码的快速修复 #

因为你的文件里已经有一个默认导出的App类组件，如果你想同时导出App3，推荐用命名导出的方式，也就是把最后一行的export App3;改成export { App3 };，这样就能同时保留两个组件的导出了。

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