Angular 13 - Must call super constructor in derived class before accessing 'this'

[dalmenarDev]

Describe the bug

I have an issue in Angular 13 with optimization: true. If I set optimization: false, it's working. but... I don't know what happen because I'm calling library as it says in the documentation with budle

import {  easepick } from '@easepick/bundle'

...

this.datePicker = new easepick.create(datePickConfig) 

Error:

In this part of the constructor

 const C = class extends Date {
            constructor(i=null, e="YYYY-MM-DD", n="en-US") {
                v(this, "lang"),
                super(C.parseDateTime(i, e, n)),
                this.lang = n
            }
            static parseDateTime(i, e="YYYY-MM-DD", n="en-US") {
                if (!i)
                    return new Date((new Date).setHours(0, 0, 0, 0));
                if (i instanceof C)
                    return i.toJSDate();
                if (i instanceof Date)
                    return i;
                if (/^-?\d{10,}$/.test(String(i)))
                    return new Date(Number(i));
                if ("string" == typeof i) {
                    const r = [];
                    let c = null;
                    for (; null != (c = C.regex.exec(e)); )
                        "\\" !== c[1] && r.push(c);
                    if (r.length) {
                        const l = {

My angular.json

 "configurations": {
            "local": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": {
                "hidden": true,
                "scripts": true,
                "styles": true
              },
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },

[ZhukAnna]

same problem

[romfilippini-gp]

Has anyone found a workaround to this? Our team has a blocker due to this in our component library.

[lubien]

Same here, tried using with Phoenix framework and did not work.

// JS Hook easepicker

import { easepick } from '@easepick/core';
import { RangePlugin } from '@easepick/range-plugin';
import { PresetPlugin } from '@easepick/preset-plugin';

export const hooks = {
  mounted() {
    const picker = new easepick.create({
      element: this.el,
      setup: (picker) => {
        picker.on("select", (e) => {
          const event = new Event("input", {
            bubbles: true,
            cancelable: true,
          });

          this.el.dispatchEvent(event);
        });
      },
      css: [
        "https://cdn.jsdelivr.net/npm/@easepick/core@1.2.1/dist/index.css",
        "https://cdn.jsdelivr.net/npm/@easepick/range-plugin@1.2.1/dist/index.css",
        "https://cdn.jsdelivr.net/npm/@easepick/preset-plugin@1.2.1/dist/index.css",
      ],
      plugins: [
        // RangePlugin, PresetPlugin
      ],
      // PresetPlugin: {
      //   position: "left",
      // },
    });

    debugger
    console.log('this.picker', picker)
  },
};

After changing to this:

// JS Hook easepicker

// import { easepick } from '@easepick/bundle';


export const hooks = {
  mounted() {
    const picker = new easepick.create({
      element: this.el,
      setup: (picker) => {
        picker.on("select", (e) => {
          const event = new Event("input", {
            bubbles: true,
            cancelable: true,
          });

          this.el.dispatchEvent(event);
        });
      },
      css: [
        "https://cdn.jsdelivr.net/npm/@easepick/core@1.2.1/dist/index.css",
        "https://cdn.jsdelivr.net/npm/@easepick/range-plugin@1.2.1/dist/index.css",
        "https://cdn.jsdelivr.net/npm/@easepick/preset-plugin@1.2.1/dist/index.css",
      ],
      plugins: [
        // RangePlugin, PresetPlugin
      ],
      // PresetPlugin: {
      //   position: "left",
      // },
    });

    debugger
    console.log('this.picker', picker)
  },
};

and adding UMD version:

<script src="https://cdn.jsdelivr.net/npm/@easepick/datetime@1.2.1/dist/index.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@easepick/core@1.2.1/dist/index.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@easepick/base-plugin@1.2.1/dist/index.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@easepick/range-plugin@1.2.1/dist/index.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@easepick/preset-plugin@1.2.1/dist/index.umd.min.js"></script>

It works.

[gavinhodge]

I had this same error in a React application.

I tracked it down to our bundler, since the easepick code looked fine and didn't reference this before super(). Upgrading from esbuild 2.16.0 to 3.0.1 made the issue go away.

When the error was ocurring, the generated code had an inserted __publicField() call before super(). Similar issue: evanw/esbuild#2134

I recommend checking your build/bundle tools.

[sandstrom]

I'm doing some issue gardening 🌱🌿 🌷 and came upon this issue. Since it's quite old I just wanted to ask if this is still relevant? If it isn't, maybe we can close this issue?

By closing some old issues we reduce the list of open issues to a more manageable set.

[csimpi]

@sandstrom I am experiencing the same error, and only when I build the project, it doesn't come up during the development

Here's the part that my browser is complaining about after I built the project.

        const W = class extends Date {
            constructor(n=null, t="YYYY-MM-DD", s="en-US") {
                q(this, "lang"),
                super(W.parseDateTime(n, t, s)),
                this.lang = s
            }

I use Angular 13
The relevant code

  ngOnInit(): void {

    this.initDatepicker('#departure_date').on('select', (e) => {
      this.orderService.form.data.departure_date = moment(e.detail.date).format(this.dateFormat);
    });

    this.initDatepicker('#needed_by').on('select', (e) => {
      this.orderService.form.data.needed_by = moment(e.detail.date).format(this.dateFormat);
    });

    this.initDatepicker('#traveler_birthday').on('select', (e) => {
      this.orderService.form.data.traveler.birthday = moment(e.detail.date).format(this.dateFormat);
    });
  }

  initDatepicker(selector: any){
    return new easepick.create(
      {
        element: selector,
        css: [
          'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
        ],
        zIndex: 10,
        format: this.dateFormat,
        AmpPlugin: {
          dropdown: {
            months: true,
            years: true,
            maxYear: (+moment().format('YYYY')+10)
          }
        },
        plugins: [
          AmpPlugin
        ]
      }
    )
  }

Update

If I add "optimization": false to angular.json to the production configuration section, it works, but the project goes TERRIBLY HUGE, from a few kilobytes to 2.5Megabyte! Obviously, this is unacceptable on production, and I think this is a bug with your package, everything else is working perfectly, there must be some incompatibility between JS targets.

I think you would just need to replace the lines here

                q(this, "lang"),
                super(W.parseDateTime(n, t, s)),

super should go before q(this, "lang"), according to the error msg.