Ember 5.1集成ember-cli-stencil加载第三方组件报函数错误求助

问题描述 #

在全新创建的Ember 5.1空项目中，使用ember-cli-stencil集成第三方Stencil组件，项目构建正常，但访问应用时抛出以下错误：

Uncaught TypeError: (0 , _loader.applyPolyfills) is not a function
    at Module.callback (auto-import-stencil-collections.js:10:1)

项目核心配置 #

package.json关键依赖片段：

{
  "devDependencies": {
    "@my-secret-thirdparty-components": "^2.7.0",
    "ember-auto-import": "^2.6.3",
    "ember-cli": "^5.1.0",
    "ember-cli-stencil": "^1.0.0",
    "ember-source": "~5.1.1",
    "webpack": "^5.88.2"
  }
}

ember-cli-build.js配置：

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    autoImport: {
      alias: {
        '@my-secret-thirdparty-components/loader': '@my-secret-thirdparty-components/dist/cjs/index.cjs',
      },
    }
  });

  return app.toTree();
};

解决方向 #

• 校验Stencil组件包导出结构：错误说明loader模块未暴露applyPolyfills方法，需查看@my-secret-thirdparty-components/dist/cjs/index.cjs的导出内容。若组件使用Stencil现代输出格式，尝试将alias路径改为ES模块入口（如dist/esm/index.js）。
• 调整依赖版本适配：ember-cli-stencil@1.0.0可能与Ember 5.1、ember-auto-import@2.6.3存在兼容性冲突。可尝试降级ember-cli-stencil至0.18.x版本，或升级到最新兼容版本；同时检查ember-auto-import是否需要调整版本以匹配Ember 5.1。
• 移除自定义alias配置：当前的autoImport别名可能干扰了ember-cli-stencil的自动解析逻辑，尝试删除该配置，让插件自行处理组件loader的导入路径。
• 手动初始化组件：若插件自动初始化失败，可创建应用初始化器手动调用组件初始化方法：

  // app/initializers/stencil-components.js
  import { applyPolyfills, defineCustomElements } from '@my-secret-thirdparty-components';
  
  export function initialize() {
    applyPolyfills().then(() => {
      defineCustomElements(window);
    });
  }
  
  export default {
    name: 'stencil-components',
    initialize
  };
  

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