Taro升级到最新的3.6.18后编译抛错

saury commented 10 months ago

复现步骤

根据文档升级了相关的taro包，移除node_modules和lockfile，确保干净的情况下重新安装了所有依赖，不管dev还是build都会报postcss相关的错误。

期望结果

success

实际结果

fail

环境信息

👽 Taro v3.6.18

  Taro CLI 3.6.18 environment info:
    System:
      OS: macOS 14.0
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v16.13.2/bin/yarn
      npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.18 => 3.6.18
      @tarojs/components: 3.6.18 => 3.6.18
      @tarojs/mini-runner: 3.6.18 => 3.6.18
      @tarojs/plugin-framework-react: 3.6.18 => 3.6.18
      @tarojs/react: 3.6.18 => 3.6.18
      @tarojs/runtime: 3.6.18 => 3.6.18
      @tarojs/taro: 3.6.18 => 3.6.18
      @tarojs/webpack-runner: 3.6.18 => 3.6.18
      babel-preset-taro: 3.6.18 => 3.6.18
      eslint-config-taro: 3.6.18 => 3.6.18
      react: ^17.0.0 => 17.0.2

补充信息

报错信息为：

Module build failed (from ./node_modules/@tarojs/mini-runner/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/@tarojs/mini-runner/node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin postcss-import requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

本地的postcss相关配置为

    postcss: {
      autoprefixer: {
        enable: true,
      },
      pxtransform: {
        enable: true,
        config: {},
      },
      url: {
        enable: true,
        config: {
          limit: 1024, // 设定转换尺寸上限
        },
      },
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'global', // 转换模式，取值为 global/module
          generateScopedName: process.env.BUILD_ENV !== 'dev' ? '[hash:base64:5]' : '[name]__[local]___[hash:base64:5]',
        },
      },
    },

看了下包，mini-runner下的node_modules/@tarojs/mini-runner/node_modules/postcss的版本为7.0.39，简单手动将这个包替换成8之后compile不会抛错终止了，但是编译出的wxss中的类名会有非法字符。

gezichenshan commented 10 months ago

我也是一样，用的3.6.18，结果发现编译后的路径都是错的，真的服了。 dist/app.js写的

require("./vendors-node_modules_taro_weapp_prebundle_chunk-JUEIR267_js.js");

实际应该是

require("./prebundle/vendors-node_modules_taro_weapp_prebundle_chunk-JUEIR267_js.js");

都没测试过就发布呀？

saury commented 9 months ago

如果有人碰到同样的问题，可参考我这里附上的解决方案：

Taro配置中声明使用webpack5：

# config/index.ts 中
const baseConfig: UserConfigExport = {
// ...
compiler: 'webpack5',
// ...
}

安装webpack5
```
$ yarn add -D webpack@5
```

ly827 commented 8 months ago

如果有人碰到同样的问题，可参考我这里附上的解决方案：

Taro配置中声明使用webpack5：
# config/index.ts 中
const baseConfig: UserConfigExport = {
  // ...
  compiler: 'webpack5',
 // ...
}
安装webpack5
$ yarn add -D webpack@5

好像没用。。。。

NervJS / taro