React应用出现ReferenceError: image is not defined错误求排查

错误分析 #

控制台给出的错误：

ReferenceError: image is not defined
at Card (card.jsx:6:42)

问题出在你的Card组件第6行的className={styles.card-image}上。JavaScript会把styles.card-image解析成styles.card减去变量image，但你根本没定义过image变量，所以触发了这个引用错误——和图片链接本身无关，链接能正常访问是因为这个错误还没到加载图片的环节就触发了。

解决方法 #

有两种可行的修复方式：

方式1：用方括号访问带连字符的CSS类名

直接修改Card组件里的img标签className写法，把点语法改成方括号语法：

import styles from './card.module.css';

function Card(){
    return(
        <div className={styles.card}>
            <img className={styles['card-image']} src="https://a.espncdn.com/i/headshots/nfl/players/full/4241479.png" alt="profile picture"></img>
            <h2 className={styles['card-title']}>Patrick Mahomes</h2>
            <p className={styles['card-text']}>Football player for the kansas city chiefs.</p>
        </div>
    );
}
export default Card

方括号语法可以正确识别对象属性名里的连字符，不会被JavaScript当成运算符。

方式2：修改CSS类名为驼峰式

把card.module.css里的类名改成符合JavaScript标识符规则的驼峰格式，比如：

/* card.module.css */
.card { /* 原样式保留 */ }
.cardImage { /* 替换原.card-image的样式 */ }
.cardTitle { /* 替换原.card-title的样式 */ }
.cardText { /* 替换原.card-text的样式 */ }

然后组件里用点语法访问：

import styles from './card.module.css';

function Card(){
    return(
        <div className={styles.card}>
            <img className={styles.cardImage} src="https://a.espncdn.com/i/headshots/nfl/players/full/4241479.png" alt="profile picture"></img>
            <h2 className={styles.cardTitle}>Patrick Mahomes</h2>
            <p className={styles.cardText}>Football player for the kansas city chiefs.</p>
        </div>
    );
}
export default Card

这种方式更符合JavaScript的常规写法，后续维护也更直观。

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