使用原生组件[Vue warn]: Failed to resolve and [Component] slot is not found.

[panhezeng]

相关平台

微信小程序

复现仓库

https://github.com/panhezeng/taro-vue-template 小程序基础库: 2.2.1 使用框架: Vue 3

复现步骤

export default {
  navigationBarTitleText: "示例",
  usingComponents: {
    "example-view":
      "../../components/wechat-miniprogram/example-view/example-view",
  },
};

期望结果

没有警告

实际结果

有警告

环境信息

 Taro CLI 3.3.16 environment info:
    System:
      OS: macOS 12.0.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
      Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.1/bin/yarn
      npm: 8.2.0 - ~/.nvm/versions/node/v16.13.1/bin/npm
    npmPackages:
      @tarojs/components: 3.3.16 => 3.3.16 
      @tarojs/mini-runner: 3.3.16 => 3.3.16 
      @tarojs/runtime: 3.3.16 => 3.3.16 
      @tarojs/taro: 3.3.16 => 3.3.16 
      @tarojs/webpack-runner: 3.3.16 => 3.3.16 
      babel-preset-taro: 3.3.16 => 3.3.16 
      eslint-config-taro: 3.3.16 => 3.3.16

[Chen-jj]

@panhezeng 截图说得很清楚了，配一下就好，与 Taro 无关

[panhezeng]

@panhezeng 截图说得很清楚了，配一下就好，与 Taro 无关

我尝试了两种配置方式，都没成功

taro 怎么修改vue loader option?

https://v3.cn.vuejs.org/api/application-config.html#compileroptions-iscustomelement

我用这个方法不行

我用webpack 也不行，说是没有这个loader

我看使用原生组件的文档和示例项目，也没有提到怎么配置自定义元素 https://taro-docs.jd.com/taro/docs/hybrid/

[panhezeng]

谢谢，已经解决了

node_modules/@tarojs/mini-runner/dist/webpack/vue.js

     chain.module
        .rule("vue")
        .use("vueLoader")
        .tap((options) => {
          options.compilerOptions.isCustomElement = (tag) =>
            tag.startsWith("wm-");
          return options;
        });

export default {
  navigationBarTitleText: "示例",
  usingComponents: {
    "wm-example-view":
      "../../components/wechat-miniprogram/example-view/example-view",
  },
};

<wm-example-view />

原生组件记得加个 <slot></slot> 这样可以消除 component slot is not found 的警告 还有css 不要使用元素名，可以消除 wxss关于选择器的警告 希望能加到使用原生组件的文档部分。

[panhezeng]

个人建议， node_modules/@tarojs/mini-runner/dist/webpack/vue.js 的 .use("vueLoader") 还是按之前的惯例写成 .use('vue-loader') 比较好，毕竟其他地方关于通过 webpack chain 修改 vue loader， 都是 .use('vue-loader') 这种写法。

[Chen-jj]

个人建议， node_modules/@tarojs/mini-runner/dist/webpack/vue.js 的 .use("vueLoader") 还是按之前的惯例写成 .use('vue-loader') 比较好，毕竟其他地方关于通过 webpack chain 修改 vue loader， 都是 .use('vue-loader') 这种写法。

感谢建议~Taro 3.4 会将 vue-loader 的编译配置暴露出来：https://docs.taro.zone/docs/next/vue3#compileroptions