使用yalc调试notistack时修改的代码无法生效如何解决？

根因定位 #

notistack的package.json中 module 字段指向 dist/notistack.esm.js，你使用的react-scripts构建工具会优先读取module字段对应的ES模块产物，而非main字段指向的源码文件。你修改完notistack的源码后直接执行yalc push，没有重新执行构建命令生成最新的dist产物，导致业务项目实际运行的始终是旧的构建产物，就出现了文件系统能看到新代码、但实际运行旧代码的矛盾现象，断点失效也是因为实际运行的产物和源码不匹配导致的。

解决方案 #

方案1：修改代码后先构建再推送 #

每次修改notistack源码后，按顺序执行命令：

• 在notistack项目根目录执行 npm run build 生成最新的dist产物
• 再执行 yalc push --replace 强制同步最新内容到所有依赖该包的项目
  --replace参数可以避免yalc版本校验导致的更新失败

方案2：临时调整配置跳过构建（调试阶段专用） #

调试阶段为了省掉每次构建的步骤，可以临时把notistack的package.json里的module字段注释掉，让业务项目直接读取源码运行，修改完源码直接执行yalc push就能生效，不需要每次构建。调试完成后记得改回原配置即可。

方案3：清除react-scripts构建缓存 #

react-scripts默认会开启构建缓存，就算依赖更新了也可能读取旧缓存，每次同步完yalc包后，启动业务项目时执行 npm start -- --reset-cache 强制清除缓存启动，避免缓存干扰。

流程优化 #

可以在notistack的package.json里新增自定义脚本，一键完成构建+推送：

"scripts": {
  "yalc:push": "npm run build && yalc push --replace"
}

之后修改完代码直接执行 npm run yalc:push 即可，无需每次手动执行多条命令。

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