Rslib 项目使用 unplugin-parcel-macros 构建时报 Module not found: Cant resolve macro-xyz.css 怎么排查【免费下载链接】react-spectrumA collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.项目地址: https://gitcode.com/GitHub_Trending/re/react-spectrum如果你在 Rslib 项目里构建基于 React Spectrum S2 的组件代码中使用react-spectrum/s2的style()宏并通过unplugin-parcel-macros把宏支持注入 rspackrslib build可能会失败并报出Module not found: Cant resolve macro-xyz.css这个错误并不是你项目里缺了某个 CSS 文件。react-spectrum 仓库中的示例项目 examples/s2-rslib 专门记录了这个问题它来自unplugin-parcel-macrosunplugin虚拟模块系统在 rspack 下的竞态条件race condition文档给出的修复方式是一个 unplugin 补丁。本文按这个示例说明如何确认错误来源、哪些方向已经被排除以及如何打上补丁并验证。先弄清 macro-xxx.css 是什么S2 的style()宏在构建时生成 CSS。按 示例 README 的描述unplugin-parcel-macros的处理流程是transform钩子生成 CSS把它放进一个模块级的assetsMap跨插件实例共享并在源码中追加import macro-hash.cssresolveId把这个 import 映射到node_modules/.virtual/下的占位文件由 unplugin 的FakeVirtualModulesPlugin写入load钩子从assetsMap 中提供真实 CSS。所以报错里的macro-xyz.css是构建时生成的虚拟模块不是可以放进src的普通文件。构建失败意味着 rspack 内部并发处理模块时异步的transform → resolveId → load管线存在一个时间窗口在这个窗口内虚拟 CSS 模块解析失败。单入口、单编译器也会触发不只是并行构建的问题。对照示例项目的接入方式examples/s2-rslib/rslib.config.ts 是排查时的参照配置单入口、ESM 输出、使用rsbuild/plugin-react并在tools.rspack中通过appendPlugins注入宏插件文档注释说明appendPlugins是推荐添加 webpack 插件的方式import {pluginReact} from rsbuild/plugin-react; import {defineConfig} from rslib/core; import {rspack as macros} from unplugin-parcel-macros; export default defineConfig({ source: { entry: { index: [./src/index.tsx] } }, lib: [ { bundle: true, dts: true, format: esm } ], output: { target: web }, plugins: [pluginReact()], tools: { rspack: (config, {appendPlugins}) { appendPlugins(macros()); return config; } } });package.json 中与本问题直接相关的依赖unplugin-parcel-macros ^0.2.0、rslib/core ^0.19.6、react-spectrum/s2 latest、React 19。构建命令为yarn build即rslib build。宏的使用方式见 Button.tsximport {style} from react-spectrum/s2/style with {type: macro}; // ... div className{style({backgroundColor: cyan-400, color: magenta-400})}已经验证无效的排查方向示例 README 的调试记录列出了逐项试验的结果。排查前先看这张表可以避免走弯路尝试的方案文档记录的结果常规构建ESM CJS 并行通过率约 40%补丁移除assets.delete()清理逻辑仍然失败补丁禁止 shutdown 时删除.virtual/目录仍然失败以上两个补丁叠加仍然失败补丁每个插件实例独立assetsMap更差串行构建独立进程ESM 通过CJS 仍然不稳定只保留单个 lib entry仍然不稳定10 次中 3 次通过禁用 DTS仍然失败每次构建前清理.virtual/仍然失败cssModules: { namedExport: false }仍然失败由此得到的结论README Key Takeaways 部分不是 ESM CJS 并行构建导致的——单 lib entry 也会失败不是.virtual/残留文件导致的——清理无用不是assets清理代码导致的——移除该代码也无法修复通过with { type: macro }直接 import style 文件也走不通——S2 会报错因为那些导出是已经展开的值而不是宏函数。README 的结论是没有找到配置层面的修复No config-level fix found yet需要上游修复或内联样式。所以不要再往rslib.config.ts里加配置试图绕过。修复方式给 unplugin 打补丁示例项目的做法是保留旧版 unplugin用本地补丁把新版 unplugin 的修复移植进来。README 说明新版 unplugin 本身已经可以解决该问题但 react-spectrum 仓库因为仍需支持一些旧构建工具当前无法升级到新版因此通过 Yarn 的resolutions把 unplugin 固定到 1.16.1 的补丁版resolutions: { unpluginnpm:^1.9.0: patch:unpluginnpm%3A1.16.1#~/.yarn/patches/unplugin-npm-1.16.1-77bc28083a.patch }补丁文件位于 unplugin-npm-1.16.1-77bc28083a.patch。补丁内的注释说明其内容移植自 unplugin 2.xFakeVirtualModulesPlugin改为按进程共享虚拟目录并做引用计数让同一进程内的并行编译器例如 rslib 的 js dts在 shutdown 时不会互相删除对方的虚拟目录目录清理改为挂在进程exit事件上。注意这套写法依赖 Yarn 环境patch:协议、resolutions字段以及.yarn/patches/目录都属于该示例项目的 Yarn 配置项目内含yarn.lock与.yarn/目录。如果你使用其他包管理器需要自己实现等价能力——补丁文件本身仍然可以参照但它针对的是 unplugin 1.16.1 的dist/index.js。验证补丁已配置时yarn install yarn build示例 README 给出的预期是With the patch, it should work.即构建应当成功。确认你遇到的错误确实是补丁针对的问题可以按 README 的复现步骤反向验证删掉package.json中的resolutions条目然后yarn install yarn buildREADME 记录此时应观察到Module not found: Cant resolve macro-xyz.css并说明关掉补丁后构建 reliably稳定地失败。如果你的报错文本与上面一致且去掉补丁后能复现、打回补丁后消失就可以确认是同一个问题。限制与边界补丁针对 unplugin 1.16.1。README 同时指出新版 unplugin 已修复此问题如果你的项目构建工具链允许升级 unplugin 是另一条路径react-spectrum 仓库自身目前因旧构建工具支持而升级不了这是它的限制不一定适用于你的项目。README 中的调试数据约 50% 的失败率、pnpm nx build等来自另一个宏文件更多的项目记录宏文件数量少、style()调用更简单的内联项目竞态窗口更小。失败概率随项目形态变化不要把某一组百分比当作固定预期。排查结论只覆盖unplugin-parcel-macros在 rspackRslib/Rsbuild下的这条虚拟模块管线如果构建其他入口时也报macro-hash.css无法解析但补丁无效说明原因不在此处需要另行排查。参考资料examples/s2-rslib/README.md、examples/s2-rslib/rslib.config.ts、examples/s2-rslib/package.json、examples/s2-rslib/.yarn/patches/unplugin-npm-1.16.1-77bc28083a.patch。【免费下载链接】react-spectrumA collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.项目地址: https://gitcode.com/GitHub_Trending/re/react-spectrum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考