ReactJS报错Uncaught TypeError: Cannot set property default求解

ReactJS - Uncaught TypeError: Cannot set property default of #<Object> which has only a getter
错误截图

错误出在Header.js文件的div类名设置行，手滑多打了一个等号：

// 错误写法
<div className={classes=['main-image']}>

classes是从CSS Module文件导入的只读对象，由webpack的CSS-loader生成，对象属性仅配置了getter访问器，不允许修改/重新赋值。你写的classes=['main-image']本质是在JSX表达式里执行赋值操作，试图重写导入的classes变量，直接触发了只读对象赋值的类型错误。

提供的App.js代码、package.json里的依赖配置都没有问题，React17和react-scripts@5也不存在版本兼容问题，不需要调整依赖。

删掉多余的等号，改成CSS Module标准的属性访问写法即可，因为类名是短横线命名的main-image，用方括号访问属性：

// 正确写法
<div className={classes['main-image']}>

修正后完整的Header.js代码如下：

import React, {Fragment} from 'react'
import mealsImage from '../../assets/meals.jpg'
import classes from './Header.module.css'

const Header = (props) => {
  return (
    <Fragment>
        <header className={classes.header}>
            <h1>ReactMeals</h1>
            <button>Cart</button>
        </header>
        <div className={classes['main-image']}>
            <img src={mealsImage} alt='A Table full of delicious meals' />
        </div>
    </Fragment>
  )
}
export default Header

改完保存文件，重启开发服务就能正常运行，不需要做其他改动。

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