SSR problems

[sibelius]

Trying to use inputmask using razzle

ReferenceError: navigator is not defined

at Object.eval (webpack-internal:///../../node_modules/inputmask/dist/inputmask/inputmask.js:17:42)

after adding:

global.navigator = {};

I've got this

TypeError: Cannot read property 'prototype' of undefined

at Object.eval (webpack-internal:///../../node_modules/inputmask/dist/inputmask/dependencyLibs/inputmask.dependencyLib.js:297:54)

[sibelius]

• [ ] navigator
• [ ] window.Event.prototype
• [ ] document.createElement

[RobinHerbots]

@sibelius ,

Which version of inputmask are you using?

[sibelius]

4.0.9

[jgcmarins]

check if this helps you:

Class Component

async componentDidMount() {
    if (this.props.mask) {
      const element = document.getElementById(`${this.props.mask}--${this.props.placeholder}`);
      const inputMaskLazy = await import('inputmask');
      const inputMask = new inputMaskLazy.default(
        { regex: this.props.mask },
        {
          placeholder: '',
          ...defaultMaskOptions,
          ...this.props.maskOptions,
        },
      );
      inputMask.mask(element);
    }
  }

  async componentWillUnmount() {
    if (this.props.mask) {
      const inputMaskLazy = await import('inputmask');
      this.inputRef && this.inputRef.current && inputMaskLazy.remove(this.inputRef.current);
    }
  }

Function Component

useEffect(() => {
    if (mask) {
      const element = document.getElementById(`${mask}--${placeholder}`);

      const inputMask = new inputMaskLazy.default(
        { regex: mask },
        { placeholder: '', ...defaultMaskOptions, ...maskOptions },
      );
      inputMask.mask(element);
    }

    return () => {
      if (mask) {
        inputRef && inputRef.current && inputMaskLazy.remove(inputRef.current);
      }
    };
  }, [mask, maskOptions, placeholder]);

[RobinHerbots]

@sibelius ,

Have you tried version 5.x?

[sibelius]

v5 fixed this problem

but we got another one

Cannot read property 'createShadowRoot' of undefined

any guess?

[sibelius]

this check https://github.com/RobinHerbots/Inputmask/blob/b29aa16db52c356c7200ddf3a34eb098ea7e0cd8/lib/inputmaskElement.js#L5

[RobinHerbots]

@sibelius ,

I pushed an update on this, can you have a try.

[sibelius]

fixed, tks

[Joonel]

Hey. I'm getting same ReferenceError: navigator is not defined error on v5.0.8 with SvelteKit by just importing the module:

[vite] Error when evaluating SSR module /src/routes/some_page/+page.svelte: failed to import "inputmask"
|- ReferenceError: navigator is not defined
    at 9845 (C:\Users\user\source\repos\the_repo\node_modules\inputmask\dist\inputmask.js:306:146)
...

I just have import Inputmask from 'inputmask'; line in my +page.svelte which causes the error by itself.

[3imed-jaberi]

@Joonel try to bump your version to v5.0.9-beta.6, this version contain the fix.

• Fix PR: https://github.com/RobinHerbots/Inputmask/pull/2704