使用Vite+AFrame(node模块)时出现Uncaught TypeError错误求助

这个错误是因为通过npm模块导入A-Frame时，Vite的模块打包机制导致A-Frame内部的Three.js渲染器实例未被正确初始化，进而在设置sortObjects属性时找不到目标对象。CDN方式是全局加载A-Frame，不会出现模块隔离导致的初始化顺序问题，因此可以正常运行。

• 调整导入方式：不要使用命名导入，直接导入A-Frame让其自动挂载到全局window对象，同时确保DOM加载完成后再注册系统：

  // script.ts
  import "aframe";
  
  document.addEventListener('DOMContentLoaded', () => {
    AFRAME.registerSystem("ball-scene-manager", {
      init: function () {
        this.ballScenes = document.querySelectorAll("[ball-scene]");
        this.currScene = undefined;
      },
    });
  });
  

  这种方式和CDN引入的全局挂载逻辑一致，避免模块导入带来的初始化冲突。

• 配置Vite适配A-Frame：在vite.config.ts中添加别名和全局变量定义，确保A-Frame正确加载：

  // vite.config.ts
  import { defineConfig } from 'vite';
  
  export default defineConfig({
    resolve: {
      alias: {
        'aframe': 'aframe/dist/aframe.min.js'
      }
    },
    define: {
      'window.AFRAME': 'AFRAME'
    }
  });
  

• 清理依赖并重新构建：

  1. 删除node_modules目录和package-lock.json文件
  2. 重新安装依赖：npm install
  3. 重启开发服务：npm run dev

• 检查A-Frame版本：确保使用的A-Frame版本与Vite兼容，推荐使用稳定版（如1.4.2或最新稳定版），避免使用测试版或过时版本。

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