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();
};
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');