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 have faced 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 Text input field, You need to add ‘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 rid of the error using correct JS format dependency.