taro 从 3.4.8 升级到 3.5.2 后，postcss 版本和 autoprefixer 版本有冲突

[cherrol]

相关平台

微信小程序

复现仓库

https://github.com/cherrol/taro-vue3 小程序基础库: 微信开发者工具 1.06.2208010 使用框架: Vue 3

复现步骤

1，npm 升级 @taro/cli:3.5.2 2，参照 taro init 生成的配置文件迁移到项目中：config/* 3，执行 npm install 4，执行 npm run dev:weapp

期望结果

编译 通过

实际结果

编译未通过

环境信息

Taro CLI 3.5.2 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
      npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD

---

补充信息

✖ Webpack
  Compiled with some errors in 5.58s

Unknown error from PostCSS plugin. Your current PostCSS version is 8.3.5, but autoprefixer uses 7.0.39. Perhaps this is the source of the error below.
✖ Errors:

ModuleBuildError: Module build failed (from ./node_modules/.pnpm/[email protected]_6ib2k5eusncbl5hf7teprwkshm/node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'value')

→ Watching... [2022/8/11 10:18:40]

node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "[object Array]".] {
  code: 'ERR_UNHANDLED_REJECTION'
}
 ELIFECYCLE  Command failed with exit code 1.

[cherrol]

最新版的 3.5.3 也有同样的问题。

[mngmis]

我是React项目 我的问题是npm run dev 可以通过，但是npm run build 报错:

Error: app.wxss from Css Minimizer plugin
Error: [object Object] is not a PostCSS plugin

[TimCN]

@mngma ，我这边通过 npm i postcss -D 重新安装postcss后能正常打包

[cherrol]

@mngma ，我这边通过 npm i postcss -D 重新安装postcss后能正常打包

3.5.4 看起来修复了这个问题。

[nodeps]

@mngma ，我这边通过 npm i postcss -D 重新安装postcss后能正常打包

我这边还是不行啊

[Chen-jj]

各位可以先检查一下 lockfile 里存在多少个 postcss 依赖的版本，其上游的依赖拓扑是怎么样的。

以我定位到的其中一种情况来看，排查思路大概是如下：

• 根据 @cherrol 定位到的问题的根本原因是 postcss 版本和 autoprefixer 版本有冲突
• 调查 lockfile 里 autoprefixer 的确存在两个版本，且其分别依赖了不同的 postcss

Details

• autoprefixer@^8.0.0 依赖了 postcss "^6.0.23"
• autoprefixer@^9.7.4 依赖了 postcss "^7.0.32"

• 再追溯 autoprefixer 的引用方，分别是 Taro 和项目依赖的 stylelint
• 升级项目中的 stylelint 依赖到最新版本 ^14.4.0，其依赖的 postcss 已更新到最新版本 ^8.4.19

至此问题解决