React项目导出FirstName时提示未定义，求错误原因及解决方法

• 错误根源：FirstName 是定义在 App 函数组件内部的局部变量，函数内部的变量仅在自身作用域内有效，模块顶层的 export { FirstName } 无法访问这个局部变量，因此触发编译错误。

• 修复方案：将 FirstName 的定义移到 App 函数外部，使其处于模块级作用域，即可正常导出。修改后的代码如下：

import React, { createContext } from 'react';
import './App.css';
import ComA from './ComA.jsx';

// 将FirstName定义移到函数外部，成为模块级变量
const FirstName = createContext();

function App() {
  return (
    <>
      <FirstName.Provider value={'Ganesh'}>
        <ComA />
      </FirstName.Provider>
    </>
  );
}

export default App;
export { FirstName };

这样修改后，FirstName 既可以在 App 组件中用于创建上下文提供者，也能被其他模块导入使用，webpack编译即可正常通过。

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