Magento2 getting 'Constr is not a constructor' error for custom theme

Question

I am not sure what this error is and if it is affecting anthing, however this is coming into my console:

layout.js:64 Uncaught TypeError: Constr is not a constructor (layout.js line 64)

Answer 1

For anyone who might encounter this problem as well: I had the same problem with my custom JavaScript components. It turned out a small typo in my JS files was causing the problem. Instead of define() I used require() on top. So to wrap it all up, here's a boilerplate for a custom JavaScript component:

define([
  'uiComponent'
], function(
  uiComponent
) {
  "use strict";

  /**
   * Return the UI Component
   */
  return uiComponent.extend({
    /**
     * Initialization method
     */
    initialize: function () {
      this._super();
    }
  });
});

Answer 2

This is a bug in the agreement-validator JS. (vendor/magento/js/module-checkout-agreements/view/frontend/web/js/view/agreement-validation.js)

Here you see: //return Component.extend({}); This should be uncommented because it breaks the second parameter of the fire function of jquery. Not sure if it breaks something else though, but the result of this, is this error and in some cases when the terms and agreements are set to manually, the order button will not work.

Until this is fixed by Magento, you can create an override for this JS in you own theme folder. To do this, add the following file:

app/design/frontend/<ThemeNameSpace>/<Theme>/Magento_CheckoutAgreements/web/js/view/agreement-validation.js and paste the contents of vendor/magento/js/module-checkout-agreements/view/frontend/web/js/view/agreement-validation.js into it. Uncomment the return and redeploy the static content.

Answer 3

I have faced the same issue. The cause of the issue i have declared same js file location which is already used in Core file.

For example, I have tried to restructure the order summary totals blocks by using my custom js file like,

"components": {
     "block-totals": {
              "component": "Magento_Checkout/js/summary/totals",                          
                  }
             }

But in the same location already a totals.js exist in magento-checkout/frontend/web/js/summary/totals.js.

Then I have renamed the file name like,

"component": "Magento_Checkout/js/summary/showtotals",

Now I don't have any errors !! and my order summary totals block overwritten.

Answer 4

For me, I was using a Magento Js Mixin and required the template adjusted slightly differently as described in the Magento docs here: https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/javascript/js_mixins.html

Answer 5

After upgrading a Magento installation from 2.1.x to 2.3.x, very same JS error was triggered by a custom JS rewrite (of a Magento core RequireJS alias) requiring an update. Next changes resolved the JS error in my case:

File: Vendor/Module/view/frontend/requirejs-config.js

var config = {
-    paths: {
-        alias: 'Vendor_Module/js/complex/path/amd-module',
+    map: {
+        '*' : {
+            alias: 'Vendor_Module/js/complex/path/amd-module'
+        }
     },
     config: {
         mixins: {

Having the require JS alias rewrite moved to the correct config made the Uncaught TypeError: Constr is not a constructor error disappear.