Codepen中React代码报错Uncaught ReferenceError: exports is not defined求助

我从教程获取了一个Codepen项目，设置中引入了以下外部脚本：

https://unpkg.com/react/umd/react.development.js
https://unpkg.com/react-dom/umd/react-dom.development.js

以下贴近原示例的代码可正常运行：

const root = ReactDOM.createRoot(document.getElementById('root'));

function Welcome1(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome1 name="Amy" />;
root.render(element)

但复制另一示例代码（开头含import * as React from 'react';）后，出现错误：Uncaught ReferenceError: exports is not defined。

尝试过两种无效方法：

• 在第一行定义var exports = {};
• 删除import语句，认为Codepen设置已处理React引入

完整报错代码：

import * as React from 'react';

const App = () => {
  const options = [
    { label: 'Fruit', value: 'fruit' },
    { label: 'Vegetable', value: 'vegetable' },
    { label: 'Meat', value: 'meat' },
  ];

  const [value, setValue] = React.useState('fruit');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <Select
        label="What do we eat?"
        options={options}
        value={value}
        onChange={handleChange}
      />

      <p>We eat {value}!</p>
    </div>
  );
};

const Select = ({ label, value, options, onChange }) => {
  return (
    <label>
      {label}
      <select value={value} onChange={onChange}>
        {options.map((option) => (
          <option value={option.value}>{option.label}</option>
        ))}
      </select>
    </label>
  );
};

export default App;

1. ES模块语法不兼容：你引入的是React的UMD版本，该版本会将React和ReactDOM挂载到全局对象，供浏览器直接调用，但不支持import/export这类ES模块语法。报错代码中使用了这些未被浏览器识别的语法，因此触发exports is not defined错误。
2. 缺少组件渲染逻辑：报错代码仅定义了App组件，但未像正常运行的示例那样调用ReactDOM.createRoot和root.render，将组件渲染到页面的DOM节点中。

1. 移除ES模块语法：删除开头的import * as React from 'react';和末尾的export default App;，因为UMD版本的React已将React暴露在全局，无需额外导入导出。
2. 添加根渲染逻辑：在代码末尾添加渲染App组件的代码，与正常运行的示例保持一致。
3. 确认Codepen设置：确保Codepen的JavaScript面板预处理器设置为Babel，以支持JSX语法解析。

修复后的完整代码：

const App = () => {
  const options = [
    { label: 'Fruit', value: 'fruit' },
    { label: 'Vegetable', value: 'vegetable' },
    { label: 'Meat', value: 'meat' },
  ];

  const [value, setValue] = React.useState('fruit');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <Select
        label="What do we eat?"
        options={options}
        value={value}
        onChange={handleChange}
      />

      <p>We eat {value}!</p>
    </div>
  );
};

const Select = ({ label, value, options, onChange }) => {
  return (
    <label>
      {label}
      <select value={value} onChange={onChange}>
        {options.map((option) => (
          <option value={option.value}>{option.label}</option>
        ))}
      </select>
    </label>
  );
};

// 添加根渲染逻辑
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

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