Skip to content

Class constructor x cannot be invoked without "new" #1006

@cutterbl

Description

@cutterbl

I have a small package, for my app, that wraps react-imask, setting up default onAccept and onComplete handlers and applying it all to a styled input using the IMaskMixin. A controlled input, where value and onChange are passed in (onAccept and onComplete use the onChange internally). Both imask and react-imask are dependencies, and not bundled into that package's final code.

I use that wrapped component in another package of my application. My package, imask and react-imask are all dependencies. Within this package, I use my wrapped component for various masked inputs.

In one such component (a date time picker), I pass in a custom blocks prop that I define in a separate file.

import IMask from 'imask';
// also tried import {MaskedRange, MaskedEnum} from 'imask'
// and tried import MaskedRange from 'imask/masked/range'
// with import MaskedEnum from 'imask/masked/enum'

export const blocks = {
  MM: {
    mask: IMask.MaskedRange,
    from: 1,
    to: 12,
  },
  DD: {
    mask: IMask.MaskedRange,
    from: 1,
    to: 31,
  },
  YY: {
    mask: IMask.MaskedRange,
    from: 0,
    to: 99,
  },
  yyyy: {
    mask: IMask.MaskedRange,
    from: 1850,
    to: 9999,
  },
  h: {
    mask: IMask.MaskedRange,
    from: 1,
    to: 12,
  },
  hh: {
    mask: IMask.MaskedRange,
    from: 1,
    to: 12,
  },
  KK: {
    mask: IMask.MaskedRange,
    from: 0,
    to: 23,
  },
  mm: {
    mask: IMask.MaskedRange,
    from: 0,
    to: 59,
  },
  A: {
    mask: IMask.MaskedEnum,
    enum: ['AM', 'PM'],
  },
  a: {
    mask: IMask.MaskedEnum,
    enum: ['am', 'pm'],
  },
};

Currently I am working all of this with a story in Storybook to troubleshoot. When all of this was with v6.0.7 it was working fine. But I just tried updating to v.7.5.0 and now I lose my masking and get the following in the console when attempting to type in the field.

Class constructor MaskedRange cannot be invoked without 'new'

I have tried reworking all of this in several different ways, but have been unsuccessful. Any assistance is greatly appreciated.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions