javascriptember.jsstenciljs

Ember 5.1 with ember-cli-stencil and third party components not working


I'm stuck. Perhaps someone is able to point me in the right direction to solve my problem.

I am trying to use third party stencil components in my ember app. Build is ok, but when i visit the app, this error is thrown:

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

I created a new and empty Ember-App, so nothing else is in it. I am using:

My package.json:

{
  "name": "desi-test-app",
  "version": "0.0.0",
  "private": true,
  "description": "Small description for desi-test-app goes here",
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build --environment=production",
    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
    "lint:css": "stylelint \"**/*.css\"",
    "lint:css:fix": "concurrently \"npm:lint:css -- --fix\"",
    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
    "lint:hbs": "ember-template-lint .",
    "lint:hbs:fix": "ember-template-lint . --fix",
    "lint:js": "eslint . --cache",
    "lint:js:fix": "eslint . --fix",
    "start": "ember serve",
    "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
    "test:ember": "ember test"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.22.5",
    "@babel/plugin-proposal-decorators": "^7.22.5",
    "@ember/optional-features": "^2.0.0",
    "@ember/string": "^3.1.1",
    "@ember/test-helpers": "^3.1.0",
    "@glimmer/component": "^1.1.2",
    "@glimmer/tracking": "^1.1.2",
    "@my-secret-thirdparty-components": "^2.7.0",
    "broccoli-asset-rev": "^3.0.0",
    "concurrently": "^8.2.0",
    "ember-auto-import": "^2.6.3",
    "ember-cli": "^5.1.0",
    "ember-cli-app-version": "^6.0.1",
    "ember-cli-babel": "^7.26.11",
    "ember-cli-clean-css": "^2.0.0",
    "ember-cli-dependency-checker": "^3.3.2",
    "ember-cli-htmlbars": "^6.2.0",
    "ember-cli-inject-live-reload": "^2.1.0",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-stencil": "^1.0.0",
    "ember-cli-terser": "^4.0.2",
    "ember-data": "~5.1.0",
    "ember-fetch": "^8.1.2",
    "ember-load-initializers": "^2.1.2",
    "ember-modifier": "^4.1.0",
    "ember-page-title": "^7.0.0",
    "ember-qunit": "^7.0.0",
    "ember-resolver": "^10.1.1",
    "ember-source": "~5.1.1",
    "ember-template-lint": "^5.11.0",
    "ember-welcome-page": "^7.0.2",
    "eslint": "^8.43.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-ember": "^11.9.0",
    "eslint-plugin-n": "^16.0.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-qunit": "^8.0.0",
    "loader.js": "^4.7.0",
    "prettier": "^2.8.8",
    "qunit": "^2.19.4",
    "qunit-dom": "^2.0.0",
    "stylelint": "^15.9.0",
    "stylelint-config-standard": "^33.0.0",
    "stylelint-prettier": "^3.0.0",
    "tracked-built-ins": "^3.1.1",
    "webpack": "^5.88.2"
  },
  "engines": {
    "node": "16.* || >= 18"
  },
  "ember": {
    "edition": "octane"
  }
}

My ember-cli-build:

'use strict';

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

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


  return app.toTree();
};

Solution

  • This is working (don't know if its a proper way). Thanks NullVoxPopuli for the hint not using ember-cli-stencil.

    app/app.js

    import { applyPolyfills, defineCustomElements } from '@my-secret-components/loader';
    applyPolyfills().then(() => {
      defineCustomElements();
    });
    

    ember-cli-build.js

    const app = new EmberApp(defaults, {
        // Add options here
        autoImport: {
          alias: {
            '@my-secret-components/loader': '@my-secret-components/loader/index.es2017.js',
          },
        }
      });
    
    // also include css
    app.import('node_modules/@my-secret-components/dist/my-secret-components/my-secret-components.css');