Quasar CLI项目集成TresJs组件出现解析失败警告求助

环境信息 #

Operating System - Windows_NT(10.0.19045) - win32/x64
NodeJs - 20.11.0

Global packages:
NPM - 10.4.0
yarn - Not installed
@quasar/cli - 2.3.0
@quasar/icongenie - Not installed
cordova - Not installed

Important local packages:
quasar - 2.14.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app-vite - 1.7.3 -- Quasar Framework App CLI with Vite
@quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
eslint-plugin-quasar - Not installed
vue - 3.4.15 -- The progressive JavaScript framework for building modern web UI.
vue-router - 4.2.5
pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
vuex - Not installed
vite - 2.9.17 -- Native-ESM powered web dev build tool
eslint - 8.56.0 -- An AST-based pattern checker for JavaScript.
electron - Not installed
electron-packager - Not installed
electron-builder - Not installed
register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
@capacitor/core - Not installed
@capacitor/cli - Not installed
@capacitor/android - Not installed
@capacitor/ios - Not installed

Quasar App Extensions:
None installed

问题现象 #

在Quasar项目中使用TresJs的圆环示例组件，页面能正常显示3D内容，但控制台出现大量如下警告：

Failed to resolve component: [Component Name]
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <IndexPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <QPageContainer>
at <QLayout view="lHh Lpr lFf" >
at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>

页面代码 #

<template>
  <q-page class="flex flex-center q-gutter-md">
    <q-card-section :horizontal="$q.screen.width > 800">
      <div class="col-1"></div>
      <q-card-section class="col-3">
        <q-card-section class="col-12 q-my-auto">
          <div class="text-h4 text-center">{{ $t("projectTitle") }}</div>
        </q-card-section>
        {{ $t("projectInfo") }}
      </q-card-section>
      <q-card class="col" flat bordered>
        <TresCanvas clear-color="#82DBC5">
          <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
          <TresMesh>
            <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
            <TresMeshBasicMaterial color="orange" />
          </TresMesh>
          <TresAmbientLight :intensity="1" />
        </TresCanvas>
      </q-card>
    </q-card-section>
  </q-page>
</template>

<script setup>
import { TresCanvas } from "@tresjs/core";
</script>

当前quasar.config.js配置 #

// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js

const { configure } = require("quasar/wrappers");
const path = require("path");

module.exports = configure(function (/* ctx */) {
  return {
    eslint: {
      warnings: true,
      errors: true,
    },
    
    boot: ["i18n", "axios", "firebase"],

    css: ["app.scss"],

    extras: [
      "roboto-font", // optional, you are not bound to it
      "material-icons", // optional, you are not bound to it
    ],

    build: {
      target: {
        browser: ["es2019", "edge88", "firefox78", "chrome87", "safari13.1"],
        node: "node20",
      },

      vueRouterMode: "hash",

      vitePlugins: [
        [
          "@intlify/vite-plugin-vue-i18n",
          {
            include: path.resolve(__dirname, "./src/i18n/**"),
          },
        ],
      ],
    },

    devServer: {
      open: true,
    },

    framework: {
      config: {},
      plugins: [],
    },

    animations: [],

    ssr: {
      pwa: false,
      prodPort: 3000,
      middlewares: [
        "render", // keep this as last one
      ],
    },

    pwa: {
      workboxMode: "generateSW",
      injectPwaMetaTags: true,
      swFilename: "sw.js",
      manifestFilename: "manifest.json",
      useCredentialsForManifestTag: false,
    },

    cordova: {},

    capacitor: {
      hideSplashscreen: true,
    },

    electron: {
      inspectPort: 5858,
      bundler: "packager",
      packager: {},
      builder: {
        appId: "myAppId",
      },
    },

    bex: {
      contentScripts: ["my-content-script"],
    },
  };
});

解决方案 #

问题根源是仅导入了TresCanvas组件，其余如TresPerspectiveCamera、TresMesh等组件未注册，Vue无法识别导致警告。推荐通过Quasar的boot机制全局注册TresJs插件：

1. 在项目src/boot目录下创建tres.js文件，内容如下：

import { createTres } from '@tresjs/core'
import { boot } from 'quasar/wrappers'

export default boot(({ app }) => {
  const Tres = createTres()
  app.use(Tres)
})

2. 修改quasar.config.js，将tres添加到boot数组中：

boot: ["i18n", "axios", "firebase", "tres"],

3. 移除页面中单独导入的TresCanvas，因为全局注册后所有TresJs组件都可直接在模板中使用。

完成上述操作后，控制台的组件解析警告将消失，3D组件可正常运行。

内容的提问来源于stack exchange，提问作者Riccardo