Umbraco.CMS.Backoffice icon indicating copy to clipboard operation
Umbraco.CMS.Backoffice copied to clipboard

V14-RC2: The imported Element JS file did not export a `element` or `default`.

Open markadrake opened this issue 1 year ago • 1 comments

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

  1. Create an App_Plugins directory.
  2. Inside, create a child directory named section.
  3. 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

  1. The console message should not appear. It is contradictory to what is actually happening.

markadrake avatar Apr 26 '24 17:04 markadrake