Webpack热重载引入Chakra-UI时报错：类体开头出现意外'['，预期为'{'

这个报错和热重载插件本身的功能逻辑无关，本质是webpack编译管线的规则配置错位：
你当前脚手架默认的babel-loader配置会无差别排除所有node_modules路径下的文件不做语法转译，而Chakra-UI依赖的framer-motion包，在发布的ESM产物里使用了类静态属性、类私有字段等较新的ES语法。你定位到的报错文件就是framer-motion的dom运动组件实现，里面包含类定义的静态属性数组，因为未经过babel转译，浏览器解析器碰到类体内的数组初始化语法时，就会误判类体缺少开头的大括号，抛出SyntaxError: Unexpected token '['. Expected opening '{' at the start of a class body的错误。

开发模式开启热重载时，webpack会走实时模块编译管线，直接把未转译的framer-motion源码推送到浏览器执行，碰到不被当前解析规则支持的类体语法时就会触发报错。你移除热重载插件后功能恢复正常，是因为关闭热替换后，webpack会直接引用预构建的、经过完整语法降级的依赖产物，不会触发实时编译的裸语法解析流程，自然就不会报错。如果你用的是已经停止维护的旧版react-hot-loader实现，它本身对node_modules下的ESM类定义有已知的解析截断bug，会在模块热替换过程中错误切割类定义的代码块，进一步放大这个语法报错。

• 修改babel-loader的排除规则，替换原来无差别排除node_modules的配置，改为带白名单的排除逻辑：

  exclude: [/node_modules[/\\](?!(framer-motion|@chakra-ui|motion-dom)[/\\])/]
  

  这段配置的逻辑是：对node_modules内的所有包默认不做转译，但是专门放行Chakra-UI、framer-motion以及其拆分的关联依赖包，让babel对这些包的代码做语法降级处理。
• 替换旧版热重载实现：如果脚手架用的是已经停止维护的react-hot-loader，直接换用官方现在默认的react-refresh方案，旧版react-hot-loader对ESM类代码的解析兼容问题，是这类语法报错的高频诱因。
• 校准@babel/preset-env的编译目标：把编译目标对齐到你实际需要兼容的浏览器版本范围，不要设置过高的语法支持基线，确保babel能将类静态属性、私有字段这类较新语法转译成浏览器可识别的ES兼容写法。
• 清空webpack的编译缓存（一般存放在项目根目录的.webpack-cache文件夹下），重启开发服务，避免旧缓存的编译残留导致报错复现。

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