React项目执行npm run build报错：Styles无法分配到文件

从你的错误日志和项目配置来看，这个问题大概率是Vanilla-Extract依赖版本不兼容，或是冗余的Babel插件与Next.js插件冲突导致的。结合你提到的“3-4个月前可正常构建、dev模式偶发报错”的情况，给你几个针对性的解决方案：

1. 移除冗余的@vanilla-extract/babel-plugin #

Vanilla-Extract的Next.js插件（@vanilla-extract/next-plugin）从v2版本开始，已经内置了Babel相关的处理逻辑，不再需要单独安装@vanilla-extract/babel-plugin。你当前的依赖里同时存在这两个包，很可能引发冲突：

• 先从package.json的dependencies中删除@vanilla-extract/babel-plugin条目
• 执行清理并重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

2. 锁定Vanilla-Extract相关依赖的精确版本 #

你怀疑是未锁定版本的包更新导致问题，建议把所有Vanilla-Extract相关依赖的版本改为精确版本（去掉版本号前的^），避免自动更新到不兼容的版本：

{
  "dependencies": {
    "@vanilla-extract/css": "1.9.2",
    // 其他依赖保持不变...
  },
  "devDependencies": {
    "@vanilla-extract/next-plugin": "2.1.1",
    // 其他依赖保持不变...
  }
}

修改后重新执行npm install确保依赖版本完全匹配。

3. 检查Next.js配置文件正确性 #

确保你的next.config.js正确配置了Vanilla-Extract插件，没有遗漏核心配置：

const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
const withVanillaExtract = createVanillaExtractPlugin();

module.exports = withVanillaExtract({
  // 你的其他Next.js配置（比如images、env等）
});

4. 彻底清理缓存后重新构建 #

有时候缓存文件会导致奇怪的遗留问题，执行以下命令彻底清理后再尝试构建：

rm -rf .next
npm run build

额外验证方案 #

如果以上步骤后问题仍存在，可以尝试升级Vanilla-Extract到与Next.js 12.2.5兼容的最新稳定版本，比如：

• @vanilla-extract/css升级到1.11.0
• @vanilla-extract/next-plugin升级到2.2.0
  （注意要保证这两个版本相互匹配，避免跨版本不兼容）

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