Umbraco.CMS.Backoffice
Umbraco.CMS.Backoffice copied to clipboard
V14-RC2: The imported Element JS file did not export a `element` or `default`.
Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)
V14-RC2
Bug summary
The following error is logged into the console indicative that the custom element did not load. However, the element has been rendered on the page and is working to the best of my knowledge.
create-extension-element.function.js line 10
Extension of alias "my.section" did not succeed creating an element class instance via the extension manifest property 'path/to/section.js'.
The imported Element JS file did not export a 'element' or 'default'.
Alternatively define the 'elementName' in the manifest.
I have elementName defined in the umbraco-package.json. The component is rendered on the page despite this error message indicating it couldn't be.
Specifics
No response
Steps to reproduce
- Create an
App_Pluginsdirectory. - Inside, create a child directory named
section. - Create the following files below.
(!!!) I noticed you have to restart the application to pick up on these JSON settings. Is this a bug? It's less than ideal while learning to build/recycle the application to load new or updated manifests.
Create file: umbraco-package.json
{
"$schema": "../../../umbraco-package-schema.json",
"name": "My.Section",
"version": "0.1.0",
"extensions": [
{
"type": "section",
"alias": "my.section",
"name": "My Section",
"js": "/app_plugins/section/section.js",
"elementName": "my-custom-section",
"meta": {
"label": "My Section",
"pathname": "my-section"
}
}
]
}
Create file: section.html
<p>Hello!</p>
Create file: section.js
class MySection extends HTMLElement {
constructor() {
super();
this.initialize();
}
async initialize() {
await this.loadTemplate();
}
async loadTemplate() {
var template = await fetch("/app_plugins/section/section.html");
this.attachShadow({mode: "open"});
this.shadowRoot.innerHTML = await template.text();
}
}
customElements.define("my-custom-section", MySection);
Expected result / actual result
- The console message should not appear. It is contradictory to what is actually happening.