运行 taro build --type h5 失败

[videni]

相关平台

H5

复现仓库

[email protected]:videni/taro-mini-app-demo.git
浏览器版本: 无
使用框架: React

复现步骤

完全按照官方的文档的安装流程:

yarn global add @tarojs/cli
taro init mini-app

期望结果

无错误

实际结果

✖ Errors:

ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'config')

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

环境信息

👽 Taro v3.6.7


  Taro CLI 3.6.7 environment info:
    System:
      OS: Linux 6.2 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
      Shell: 5.1.16 - /bin/bash
    Binaries:
      Node: 18.16.0 - /usr/bin/node
      Yarn: 1.22.19 - /usr/bin/yarn
      npm: 9.6.7 - /usr/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.7 => 3.6.7 
      @tarojs/components: 3.6.7 => 3.6.7 
      @tarojs/helper: 3.6.7 => 3.6.7 
      @tarojs/plugin-framework-react: 3.6.7 => 3.6.7 
      @tarojs/plugin-platform-alipay: 3.6.7 => 3.6.7 
      @tarojs/plugin-platform-h5: 3.6.7 => 3.6.7 
      @tarojs/plugin-platform-jd: 3.6.7 => 3.6.7 
      @tarojs/plugin-platform-qq: 3.6.7 => 3.6.7 
      @tarojs/plugin-platform-swan: 3.6.7 => 3.6.7 
      @tarojs/plugin-platform-tt: 3.6.7 => 3.6.7 
      @tarojs/plugin-platform-weapp: 3.6.7 => 3.6.7 
      @tarojs/react: 3.6.7 => 3.6.7 
      @tarojs/runtime: 3.6.7 => 3.6.7 
      @tarojs/shared: 3.6.7 => 3.6.7 
      @tarojs/taro: 3.6.7 => 3.6.7 
      @tarojs/webpack5-runner: 3.6.7 => 3.6.7 
      babel-preset-taro: 3.6.7 => 3.6.7 
      eslint-config-taro: 3.6.7 => 3.6.7 
      react: ^18.0.0 => 18.2.0 

[Chen-jj]

@videni 视频太糊，init 的选项发一下

[videni]

@Chen-jj 下面是整个执行过程， 简单的第一次安装。

root@3834e4247c42:/var/www/html# taro init mini-app

👽 Taro v3.6.7

⚠ 获取 taro 全局配置文件失败，不存在全局配置文件：/root/.taro-global-config/index.json

Taro 即将创建一个新项目!
Need help? Go and open issue: https://tls.jd.com/taro-issue-helper

? 请输入项目介绍 first taro project
? 请选择框架 React
? 是否需要使用 TypeScript ？ No
? 请选择 CSS 预处理器（Sass/Less/Stylus） Less
? 请选择编译工具 Webpack5
? 请选择包管理工具 yarn
? 请选择模板源 Gitee（最快）
✔ 拉取远程模板仓库成功！
? 请选择模板 taro-hooks（使用 taro-hooks 的模板）

✔ 创建项目: mini-app
✔ 创建文件: /var/www/html/mini-app/.editorconfig
✔ 创建文件: /var/www/html/mini-app/.eslintrc.js
✔ 创建文件: /var/www/html/mini-app/.gitignore
✔ 创建文件: /var/www/html/mini-app/babel.config.js
✔ 创建文件: /var/www/html/mini-app/package.json
✔ 创建文件: /var/www/html/mini-app/project.config.json
✔ 创建文件: /var/www/html/mini-app/project.tt.json
✔ 创建文件: /var/www/html/mini-app/config/dev.js
✔ 创建文件: /var/www/html/mini-app/config/index.js
✔ 创建文件: /var/www/html/mini-app/config/prod.js
✔ 创建文件: /var/www/html/mini-app/src/app.config.js
✔ 创建文件: /var/www/html/mini-app/src/app.less
✔ 创建文件: /var/www/html/mini-app/src/app.js
✔ 创建文件: /var/www/html/mini-app/src/index.html
✔ 创建文件: /var/www/html/mini-app/src/pages/index/hook.png
✔ 创建文件: /var/www/html/mini-app/src/pages/index/index.config.js
✔ 创建文件: /var/www/html/mini-app/src/pages/index/index.less
✔ 创建文件: /var/www/html/mini-app/src/pages/index/index.jsx

✔ cd mini-app, 执行 git init
yarn install v1.22.19
info No lockfile found.
[1/5] Validating package.json...
[2/5] Resolving packages...
⚠ warning taro-hooks > [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
⚠ warning @tarojs/cli > [email protected]: request has been deprecated, see request/request#3142
⚠ warning @tarojs/cli > request > [email protected]: this library is no longer supported
⚠ warning @tarojs/cli > request > [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
⚠ warning @tarojs/webpack5-runner > stylus > css > [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
⚠ warning @tarojs/webpack5-runner > @tarojs/runner-utils > scss-bundle > @types/[email protected]: This is a stub types definition. sass provides its own type definitions, so you do not need this installed.
⚠ warning @tarojs/webpack5-runner > css-minimizer-webpack-plugin > cssnano > cssnano-preset-default > postcss-svgo > svgo > [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
⚠ warning stylelint > file-entry-cache > flat-cache > [email protected]: CircularJSON is in maintenance only, flatted is its successor.
⚠ warning stylelint > globby > fast-glob > micromatch > snapdragon > [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
⚠ warning stylelint > globby > fast-glob > micromatch > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
⚠ warning stylelint > globby > fast-glob > micromatch > snapdragon > source-map-resolve > [email protected]: See https://github.com/lydell/source-map-url#deprecated
⚠ warning stylelint > globby > fast-glob > micromatch > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
⚠ warning stylelint > postcss-markdown > remark > remark-parse > [email protected]: Use String.prototype.trim() instead
[3/5] Fetching packages...
[4/5] Linking dependencies...
[5/5] Building fresh packages...
success Saved lockfile.
Done in 41.56s.
✔ 安装成功
创建项目 mini-app 成功！
请进入项目目录 mini-app 开始工作吧！😝

root@3834e4247c42:/var/www/html# cd mini-app/
root@3834e4247c42:/var/www/html/mini-app# yarn build:h5

yarn run v1.22.19
$ taro build --type h5
👽 Taro v3.6.7

Tips:

1. 建议开启持久化缓存功能，能有效提升二次编译速度，详情请参考: https://docs.taro.zone/docs/config-detail#cache。

✖ Webpack
Compiled with some errors in 11.47s

✖ Errors:

ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'config')

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
root@3834e4247c42:/var/www/html/mini-app# yarn build:wxapp
yarn run v1.22.19
error Command "build:wxapp" not found. Did you mean "build:weapp"?
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

root@3834e4247c42:/var/www/html/mini-app# yarn build:weapp

yarn run v1.22.19
$ taro build --type weapp
👽 Taro v3.6.7

Tips:

1. 建议开启持久化缓存功能，能有效提升二次编译速度，详情请参考: https://docs.taro.zone/docs/config-detail#cache。

✖ Webpack
Compiled with some errors in 3.86s

✖ Errors:

ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'config')

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[Chen-jj]

@videni 这个错误信息，不是安装失败吧，是运行 taro build --type h5 失败。

这是我的环境信息，建议切到 node16 再试试

 Taro CLI 3.6.7 environment info:
    System:
      OS: macOS 13.1
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.0/bin/yarn
      npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.7 => 3.6.7
      @tarojs/components: 3.6.7 => 3.6.7
      @tarojs/helper: 3.6.7 => 3.6.7
      @tarojs/plugin-framework-react: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-alipay: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-h5: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-jd: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-qq: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-swan: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-tt: 3.6.7 => 3.6.7
      @tarojs/plugin-platform-weapp: 3.6.7 => 3.6.7
      @tarojs/react: 3.6.7 => 3.6.7
      @tarojs/runtime: 3.6.7 => 3.6.7
      @tarojs/shared: 3.6.7 => 3.6.7
      @tarojs/taro: 3.6.7 => 3.6.7
      @tarojs/webpack5-runner: 3.6.7 => 3.6.7
      babel-preset-taro: 3.6.7 => 3.6.7
      eslint-config-taro: 3.6.7 => 3.6.7
      react: ^18.0.0 => 18.2.0

[TheKonka]

node 18没有问题，我用的就是 node 18 + pnpm , 不如 不用 taro-hooks，使用默认模板 + pnpm 试下

[videni]

@TheKonka 一样的，测试默认模板也一样的错误。

[videni]

@Chen-jj 测试 node 16， 一样的错误。 应该是有bug, 跟我环境无关。 可以说大多数的模板都抛出同样的错误。估计是/postcss-loader/哪里引入了错误。

oot@ee3f1da950f5:/var/www/html# node -v
v16.20.0
root@ee3f1da950f5:/var/www/html# npm install -g @tarojs/cli
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142

added 782 packages in 2m

79 packages are looking for funding
run npm fund for details
root@ee3f1da950f5:/var/www/html# taro init mini-app
👽 Taro v3.6.7

⚠ 获取 taro 全局配置文件失败，不存在全局配置文件：/root/.taro-global-config/index.json

Taro 即将创建一个新项目!
Need help? Go and open issue: https://tls.jd.com/taro-issue-helper

? 请输入项目介绍 first taro project
? 请选择框架 React
? 是否需要使用 TypeScript ？ No
? 请选择 CSS 预处理器（Sass/Less/Stylus） Less
? 请选择编译工具 Webpack5
? 请选择包管理工具 yarn
? 请选择模板源 Gitee（最快）
✔ 拉取远程模板仓库成功！
? 请选择模板 默认模板

✔ 创建项目: mini-app
✔ 创建文件: /var/www/html/mini-app/.editorconfig
✔ 创建文件: /var/www/html/mini-app/.eslintrc
✔ 创建文件: /var/www/html/mini-app/.gitignore
✔ 创建文件: /var/www/html/mini-app/babel.config.js
✔ 创建文件: /var/www/html/mini-app/package.json
✔ 创建文件: /var/www/html/mini-app/project.config.json
✔ 创建文件: /var/www/html/mini-app/project.tt.json
✔ 创建文件: /var/www/html/mini-app/config/dev.js
✔ 创建文件: /var/www/html/mini-app/config/index.js
✔ 创建文件: /var/www/html/mini-app/config/prod.js
✔ 创建文件: /var/www/html/mini-app/src/app.config.js
✔ 创建文件: /var/www/html/mini-app/src/app.less
✔ 创建文件: /var/www/html/mini-app/src/app.js
✔ 创建文件: /var/www/html/mini-app/src/index.html
✔ 创建文件: /var/www/html/mini-app/src/pages/index/index.config.js
✔ 创建文件: /var/www/html/mini-app/src/pages/index/index.less
✔ 创建文件: /var/www/html/mini-app/src/pages/index/index.jsx

✔ cd mini-app, 执行 git init
yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
⚠ warning @tarojs/cli > [email protected]: request has been deprecated, see request/request#3142
⚠ warning @tarojs/cli > request > [email protected]: this library is no longer supported
⚠ warning @tarojs/cli > request > [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
⚠ warning @tarojs/webpack5-runner > stylus > css > [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
⚠ warning @tarojs/webpack5-runner > @tarojs/runner-utils > scss-bundle > @types/[email protected]: This is a stub types definition. sass provides its own type definitions, so you do not need this installed.
⚠ warning @tarojs/webpack5-runner > css-minimizer-webpack-plugin > cssnano > cssnano-preset-default > postcss-svgo > svgo > [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
[2/4] Fetching packages...
[3/4] Linking dependencies...
⚠ warning "eslint-config-taro > @typescript-eslint/parser > @typescript-eslint/typescript-estree > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
⚠ warning " > [email protected]" has unmet peer dependency "typescript@>=2.7".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 116.31s.
✔ 安装成功
创建项目 mini-app 成功！
请进入项目目录 mini-app 开始工作吧！😝
root@ee3f1da950f5:/var/www/html# cd mini-app/
root@ee3f1da950f5:/var/www/html/mini-app# yarn build:h5
yarn run v1.22.19
$ taro build --type h5
👽 Taro v3.6.7

Tips:

1. 建议开启持久化缓存功能，能有效提升二次编译速度，详情请参考: https://docs.taro.zone/docs/config-detail#cache。

✖ Webpack
Compiled with some errors in 8.50s

✖ Errors:

ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'config')

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[videni]

解决方法：

在更目录添加文件postcss.config.js

module.exports ={}

[NgXrBpHvZj]

pnpm dev:h5报错

yarn dev:h5报错

这种怎么解决？