'input-mask' has already been defined as a custom element

[mwxp06]

• Describe: In firefox in console should be found error: NotSupportedError: 'input-mask' has already been defined as a custom element inputmask.js:2747 modules http://localhost:3000/static/js/static/input_mask/inputmask.js:2747 __webpack_require__ http://localhost:3000/static/js/static/input_mask/inputmask.js:2789 modules http://localhost:3000/static/js/static/input_mask/inputmask.js:650 __webpack_require__ http://localhost:3000/static/js/static/input_mask/inputmask.js:2789 <anonymous> http://localhost:3000/static/js/static/input_mask/inputmask.js:2781 webpackUniversalModuleDefinition http://localhost:3000/static/js/static/input_mask/inputmask.js:10 <anonymous> http://localhost:3000/static/js/static/input_mask/inputmask.js:13

  In chrome in console should be found error: Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "input-mask" has already been used with this registry at Object.modules (http://localhost:3000/static/js/static/input_mask/inputmask.js:2747:28) at __webpack_require__ (http://localhost:3000/static/js/static/input_mask/inputmask.js:2789:34) at Object.modules (http://localhost:3000/static/js/static/input_mask/inputmask.js:650:83) at __webpack_require__ (http://localhost:3000/static/js/static/input_mask/inputmask.js:2789:34) at http://localhost:3000/static/js/static/input_mask/inputmask.js:2781:36 at webpackUniversalModuleDefinition (http://localhost:3000/static/js/static/input_mask/inputmask.js:10:17) at http://localhost:3000/static/js/static/input_mask/inputmask.js:13:2

• Browser Firefox, Chrome

• Inputmask version 5.0.4-beta.27 (same error in previous version 5.0.X)

[RobinHerbots]

@mwxp06 ,

Can you reproduce this in a jsfiddle?

Are you also using other masking plugins? Or did you define your own?

[RobinHerbots]

@mwxp06 ,

I added a check wheter the input-mask element is already defined or not. ("version": "5.0.4-beta.30")

[mwxp06]

@RobinHerbots Thank you, me problem solved :)

[MrCsabaToth]

Having this as well, it comes only with FF and Chrome, not with IE11. I guess because the faulty code is in some shadow DOM manipulation and IE is not capable of that?

What's the exact PR which fixes this or when will 5.0.4 be available on NuGet?

[MrCsabaToth]

For the record this is with 5.0.2, Chrome:

jquery.inputmask.js:2572 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "input-mask" has already been used with this registry
    at Object.modules (http://localhost:65414/Scripts/inputmask/jquery.inputmask.js:2572:28)
    at __webpack_require__ (http://localhost:65414/Scripts/inputmask/jquery.inputmask.js:2682:34)
    at Object.modules (http://localhost:65414/Scripts/inputmask/jquery.inputmask.js:516:82)
    at __webpack_require__ (http://localhost:65414/Scripts/inputmask/jquery.inputmask.js:2682:34)
    at Object.modules (http://localhost:65414/Scripts/inputmask/jquery.inputmask.js:2640:18)
    at __webpack_require__ (http://localhost:65414/Scripts/inputmask/jquery.inputmask.js:2682:34)
    at http://localhost:65414/Scripts/inputmask/jquery.inputmask.js:2674:36
    at webpackUniversalModuleDefinition (http://localhost:65414/Scripts/inputmask/jquery.inputmask.js:10:75)
    at http://localhost:65414/Scripts/inputmask/jquery.inputmask.js:13:2

[MrCsabaToth]

So I don't see PR, but here is the latest commit about that clause: https://github.com/RobinHerbots/Inputmask/commit/08aecaeff368ce69b478e23fc2c86d4f3f3d8f8b#diff-871a6096189d9ab341346f3dbe5c6873

Seemingly the clause had multiple changes since end of January to secure.

Currently https://github.com/RobinHerbots/Inputmask/blob/5.x/lib/inputmaskElement.js#L8: if (document && document.head && document.head.attachShadow && window.customElements && window.customElements.get("input-mask") === undefined) {

And window.customElements.define("input-mask", InputmaskElement); at https://github.com/RobinHerbots/Inputmask/blob/5.x/lib/inputmaskElement.js#L31

[singladno]

Still the same problem when having more than one instance on the page:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "input-mask" has already been used with this registry

version: 5.0.6

[RobinHerbots]

@singladno ,

How do I reproduce that error? Can you provide some example code.

[singladno]

@RobinHerbots, in my components library I have a component which is a hoc for inputmask:

import React, { FC, useEffect, useRef } from 'react';
import { FormikValues } from 'formik';
import { Form } from 'react-bootstrap';
import { FormControlProps } from 'react-bootstrap/esm/FormControl';
import inputmask, { Options } from 'inputmask';

type IFormControlProps = Omit<FormControlProps, 'type'>;

interface InputMaskProps extends Options {
  value?: string;
  name?: string;
  isInvalid?: boolean;
  mask?: string;
  maskPlaceholder?: string;
  alias?: string;
  readOnly?: boolean;
  className?: string;
  groupSeparator?: string;
  inputmode?:
    | 'none'
    | 'text'
    | 'tel'
    | 'url'
    | 'email'
    | 'numeric'
    | 'decimal'
    | 'search';
  onChange?: (value: string) => void;
  onBlur?: (value: any) => void;
}

type Props = InputMaskProps & IFormControlProps & FormikValues;

export const VtbInputmask: FC<Props> = (props: Props) => {
  const {
    value,
    maskPlaceholder,
    onChange,
    onBlur,
    alias,
    className = '',
    readOnly = false,
    field,
    ...inputMaskOptions
  } = props;

  const inputElement = useRef<HTMLInputElement>(null);

  useEffect(() => {
    const opts: Options = {
      ...inputMaskOptions,
      placeholder: maskPlaceholder,
      showMaskOnHover: false,
      showMaskOnFocus: true,
      alias: alias,
    };

    const im =
      typeof inputmask === 'function'
        ? new inputmask(opts)
        : new inputmask.default(opts);
    if (inputElement.current) {
      im.mask(inputElement.current);
    }

    return (): void => {
      if (inputElement.current && inputElement.current.parentNode) {
        inputElement.current.parentNode.removeChild(inputElement.current);
      }
    };
  }, []);

  return (
    <Form.Control
      type="text"
      ref={inputElement}
      value={value}
      readOnly={readOnly}
      onChange={(event) => onChange && onChange(event.target.value)}
      onBlur={onBlur}
      placeholder={maskPlaceholder}
      className={`vtb-input ${className}`}
      {...field}
      {...inputMaskOptions}
    />
  );
};

When using it in another project I import my HOC like: import {VtbInputmask} from 'ui-lib' it works fine.

But if I want to import just one HOC without pulling the whole library into my bundle like: import {VtbInputmask} from ui-lib/componets/../Vtbinputmask then I get this:

NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': the name "input-mask" has already been used with this registry

[antch]

Just FYI, for me when I applied the fix from #2544 manually it fixed this issue for me as well.