Uncaught TypeError: Constr is not a constructor Error adminpanel Magento 2.

When you are dealing with Magento 2 ui_component modification for a text input field with the custom component, Sometimes you might face the issue like,

Uncaught TypeError: Constr is not a constructor layout.js line no xx.

You can resolve this issue by just adding a proper javascript object to your JS file.

For the Text input field, You need to add the ‘Magento_Ui/js/form/element/abstract’ Object in your JS file.

Let’s an example of ui_component with form field input type,

<field name="custom_field" formElement="input"
       component="Package_Modulename/js/form/custom-field">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="source" xsi:type="string">customer</item>
        </item>
    </argument>
    <settings>
        <dataType>text</dataType>
        <label translate="true">Custom field</label>
        <dataScope>custom_field</dataScope>
    </settings>
</field>

You have created a custom js file for your field at a location, app/code/Package/Modulename/view/adminhtml/web/js/form/custom-field.js

Wrong Format of Used JS file,

define([
    'jquery',
], function ($) {
    'use strict';

    function myMethod() {
        console.log(this);
    }
});

• • • • • • • • • • Resolution
• Use ‘Magento_Ui/js/form/element/abstract’ to define your custom js file. In Magento 2 adminhtml  area UI Form Component.

Each individual form element has a corresponding view model object.  For text input fields, these view models come from the constructor function returned by the Magento_Ui/js/form/element/abstract RequireJS module.

The correct format for JS file for text field,

define([
    'jquery',
    'Magento_Ui/js/form/element/abstract',
], function ($, Abstract) {
    'use strict';

    return Abstract.extend({
        /**
         * Initializes UISelect component.
         *
         * @returns {UISelect} Chainable.
         */
        initialize: function () {
            this._super();
            this.myMethod();
            return this;
        },
        myMethod: function () {
            console.log(this);
        }
    });
});

You can get rid of the error using the correct JS format dependency.