React新手组件导入导出报错：TypeError: Cannot assign to read only property 'exports'

这个错误大概率是因为混用了ES模块语法（import/export）和CommonJS语法（module.exports/require），再加上你的组件导入/导出方式不匹配导致的。结合你的代码，咱们一步步来修复：

1. 修正AnswerBox.js的导出逻辑 #

假设你的AnswerBox是一个标准的React组件，先确保用ES模块的默认导出方式：

// components/AnswerBox.js
import React from 'react';

// 示例组件，替换成你自己的代码
function AnswerBox() {
  return <div>这是我的AnswerBox组件</div>;
}

// 关键：用默认导出组件
export default AnswerBox;

⚠️ 特别注意：如果你的AnswerBox.js里同时写了import和module.exports，就会触发这个只读属性的错误，一定要统一用ES模块的export语法。

2. 修正index.js的导入方式 #

你现在用的import * as AnswerBox from './components/AnswerBox.js'会把该文件的所有导出打包成一个对象，但你要渲染的是组件本身，所以改成默认导入即可：

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// 直接默认导入组件
import AnswerBox from './components/AnswerBox.js';

ReactDOM.render(
  <AnswerBox />,
  document.getElementById('root')
);

额外排查点 #

如果上面的修改还没解决问题，检查这两个细节：

• 如果你是自己配置的项目（不是用Create React App初始化的），确保webpack、Babel等工具的配置支持ES模块语法。
• 绝对不要在同一个JS文件里混合使用import和module.exports，比如不要在AnswerBox.js里既写import React from 'react'，又写module.exports = AnswerBox。

按照这个方式调整后，你的组件应该就能正常导入和渲染了。

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