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

[sunday60004]

同样的问题，Taro4.0.8，微信小程序3.7.4基础库，希望官方能够排查解决

[Ludogage]

同样的问题，Taro4.0.8，微信小程序3.7.4基础库，希望官方能够排查解决

同上

[xiaobaogeit]

针对上面元素不能加class属性，我目前的方法就是直接把有问题的class换成className，就能正常使用了。

 <view  className="xxx">
 </view>

[hyw123456]

给我整笑了，24年的问题还没有解决，解决的是dev环境不报错，build一下还是报错。 最后的结果还是不能用，并且更难定位

[GreatAuk]

同样遇到了，下次项目转 uni 吧😇

[pzgz]

有点难以置信，这么低级的问题，怎么能发布的，我反正已经退回了v3，后续不敢用了

[987763485]

不知道原理是什么，但是我解决了 第一次

第二次

居然成功了

[zhaopengkun1996]

这个问题挺莫名奇妙的，现在是布局有的时候不报错，有的时候疯狂报错，添加一行空元素都不能，

[zhaopengkun1996]

如果报错的话，取消三级嵌套，我发现是主体+父元素+子元素+孙子元素后就会报错，取消一层，主体+父+子就没了，感觉有点是没递归到底

[Luxiaoren]

原因是如果再同一层级具有相同class的元素没有加key 就会有这个错误，可以排查一下页面内的元素，增加key来避免，不过这个问题真鬼畜，只在生产环境下才有

[yijinc]

原因是如果再同一层级具有相同class的元素没有加key 就会有这个错误，可以排查一下页面内的元素，增加key来避免，不过这个问题真鬼畜，只在生产环境下才有

正解，我在开发生产环境都存在。我写一个纯显示页面一直报这个错，加上任意傻逼 key 就好了

[penjj]

问题出在这里，去 node_modules 下改这一行就能正常跑

[penjj]

临时解决可以试试 pnpm patch

pnpm patch @tarojs/webpack5-runner

去 node_modules 下编辑 .pnpm_patches/@tarojs/[email protected]/dist/webpack/MiniBaseConfig.js 59行

- '@tarojs/runtime': (0, helper_1.resolveSync)('@tarojs/runtime', resolveOptions),
+ '@tarojs/runtime': require.resolve('@tarojs/runtime'),

修改完后执行第一条命令返回的绿色的命令即可