MUI项目中CARD_WIDTH变量报错未定义，添加console.log后消失的原因

核心原因：Tree Shaking的误判 #

当你直接在MUI styles箭头函数返回的对象里使用导入的CARD_WIDTH时，Webpack这类打包工具的Tree Shaking机制可能会误把这个变量判定为“未被使用”。因为静态分析阶段，打包工具没法识别MUI内部会把返回对象里的变量引用转化为实际生效的样式，于是会把这个导入的变量从打包结果里移除，最终导致运行时抛出CARD_WIDTH is not defined错误。

而当你添加console.log(CARD_WIDTH)后，变量被函数内部显式调用，打包工具的静态分析能明确识别到这个变量的引用关系，不会再将其移除，自然就不会报错了。

MUI样式函数的特殊性 #

MUI的styles函数最终会通过CSS-in-JS机制动态生成样式，这个过程是运行时才完成的。打包工具的静态分析无法深入到MUI的内部处理逻辑里去判断变量是否真的被使用，只能基于代码表面结构做判断，这就导致了直接在返回对象里用变量时的误判。

替代解决方式 #

除了加console.log，你还可以用这些方法规避问题：

• 把导入的变量赋值给函数内部临时变量，再在返回对象里使用：

  const useStyles = makeStyles((theme) => {
    const cardWidth = CARD_WIDTH;
    return {
      card: {
        width: cardWidth
      }
    };
  });
  

• 给导入语句加注释，明确告诉打包工具保留该变量（针对Webpack）：

  /* webpackPreload: true */ import { CARD_WIDTH } from './your-style-file';
  

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