vue&tailwindcss&image报错 TypeError: Cannot read property 'nodeName' of undefined

[dagouzhi]

相关平台

微信小程序

复现仓库

https://github.com/icebreaker-template/taro-vue3-tailwind-vscode-template.git
小程序基础库: 3.6.5
使用框架: Vue 3

复现步骤

当在vue中同时使用tailwindcss和image，会报错 newChild 为null

/**
   * @doc https://developer.mozilla.org/zh-CN/docs/Web/API/Node/insertBefore
   * @scenario
   * [A,B,C]
   *   1. insert D before C, D has no parent
   *   2. insert D before C, D has the same parent of C
   *   3. insert D before C, D has the different parent of C
   */
  insertBefore(newChild, refChild, isReplace) {
    if (newChild.nodeName === _constants_index_js__WEBPACK_IMPORTED_MODULE_8__.DOCUMENT_FRAGMENT) {
      newChild.childNodes.reduceRight((previousValue, currentValue) => {
        this.insertBefore(currentValue, previousValue);
        return currentValue;
      }, refChild);
      return newChild;
    }

期望结果

正常使用

实际结果

报错，不渲染

环境信息

👽 Taro v4.0.4


  Taro CLI 4.0.4 environment info:
    System:
      OS: macOS 14.2.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
      Yarn: 1.22.22 - ~/Library/pnpm/yarn
      npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
    npmPackages:
      @tarojs/cli: 4.0.7 => 4.0.7 
      @tarojs/components: 4.0.7 => 4.0.7 
      @tarojs/helper: 4.0.7 => 4.0.7 
      @tarojs/plugin-framework-vue3: 4.0.7 => 4.0.7 
      @tarojs/plugin-html: 4.0.7 => 4.0.7 
      @tarojs/plugin-platform-h5: 4.0.7 => 4.0.7 
      @tarojs/plugin-platform-weapp: 4.0.7 => 4.0.7 
      @tarojs/plugin-vue-devtools: ^4.0.8 => 4.0.8 
      @tarojs/runtime: 4.0.7 => 4.0.7 
      @tarojs/shared: 4.0.7 => 4.0.7 
      @tarojs/taro: 4.0.7 => 4.0.7 
      @tarojs/taro-loader: 4.0.8 => 4.0.8 
      @tarojs/vite-runner: 4.0.7 => 4.0.7 
      @tarojs/webpack5-runner: 4.0.8 => 4.0.8 
      babel-preset-taro: 4.0.7 => 4.0.7 

[icezeros]

同样的问题，有解决办法吗

[TimSpan]

一样的问题 加了任何属性就报错哦

[pzgz]

同样碰到了这个问题，感觉并不是tailwind的问题，我拿掉tailwind以后，问题依旧，而且我这边的错误就是拿掉一个view就正常，加上一个就出错了

    <view class="w-full px-3 py-2 bg-white rounded-md shadow-md">
      <view class="mb-2 text-xs font-semibold text-gray-800">行驶证照片</view>
      <view class="flex items-center justify-center"></view>
      <view class="w-full px-3 py-2 bg-white rounded-md bg-secondary-bg max-h-[200px]">
        行驶证照片
      </view>
      <view class="w-full px-3 py-2 bg-white rounded-md bg-secondary-bg max-h-[200px]">
        行驶证照片
      </view>
    </view>

外面还有一层view，我这边就是拿掉里面最后一个view，就正常，一加上去就出错，错误和OP提供的一模一样。

这个问题太恶性，一下把整个项目都挂住了，只能回退到v3