Taro安装tailwindcss的异常报错

官方教程使用 Tailwind CSS | Taro 文档

按照官方流程一步一步操作下来，会报错

如果你选的是Vite会出现下面报错

taro Error: Cannot find module ‘webpack’

安装就能解决

yarn add webpack

或

npm i webpack

然后继续运行，依然报错

ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: E:\项目0528\taro-first\src\app.ts: Unexpected token, expected “,” (5:25)

3 | import ‘./app.scss’
4 |

5 | function App({ children }: PropsWithChildren) {
| ^
6 | useLaunch(() => {
7 | })
8 |
at parser.next ()
at normalizeFile.next ()
at run.next ()
at transform.next ()

→ Watching… [2024/7/30 16:47:25]

node:internal/process/promises:389
new UnhandledPromiseRejection(reason);
^

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]”.
at throwUnhandledRejectionsMode (node:internal/process/promises:389:7)
at processPromiseRejections (node:internal/process/promises:470:17)
at processTicksAndRejections (node:internal/process/task_queues:96:32) {
code: ‘ERR_UNHANDLED_REJECTION’
}

Node.js v20.15.0
error Command failed with exit code 1.

大概看出是webpack不解析typescript，尝试安装飘红的tsconfig-paths-webpack-plugin，应用

webpackChain(chain) {
    chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)
    chain.merge({
      plugin: {
        install: {
          plugin: UnifiedWebpackPluginV5,
          args: [
            {
              appType: 'taro',
              // disabled: WeappTailwindcssDisabled,
              rem2rpx: true
            }
          ]
        }
      }
    });
  }

依旧没用，正确方式，打开babel.config.js，注解compiler这行👇

// babel.config.js
// babel-preset-taro 更多选项和默认值：
// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      ts: true,
      // compiler: 'vite',
    }]
  ]
}

chain.resolve.plugin(‘tsconfig-paths’).use(TsconfigPathsPlugin)删不删都无所谓
此时应该可以正常运行了

<Text className=" text-base text-red-300">哈哈哈</Text>

如果出现下面这个

页面【pages/index/index]错误:
Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: E:\项目0528\taro-first\src\pages\index\index.tsx: Unexpected token, expected “,” (12:29)

微信小程序 👉 详情 👉 本地设置 👉 勾选将JS编译成ES5