Uncaught TypeError: Cannot call a class as a function

[cutterbl]

I have a library of React components. Within this library, I'm applying react-imask to the input control of my DateTimePicker. Within Storybook, everything is fantastic. But, once I use this control in my application, it goes to hell. The issue are the blocks I use to control user input of the control.

import IMask from 'imask/esm/imask';
import MaskedRange from 'imask/esm/masked/range';
import MaskedEnum from 'imask/esm/masked/enum';

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

I've setup my control similar to the way the Guide configures a MomentJs based date control. You can see a slightly simplified example in this CodeSandbox.

CodeSandbox has the same problem that I do. While my control works flawlessly in Storybook, when I import it into my app and try to use it I get the dreaded Uncaught TypeError: Cannot call a class as a function. This appears to happen the minute I begin typing in a field.

For me, I compile my library using Rollup, with a pretty basic Babel config:

library Babel config:

module.exports = function (api) {
  api.cache(false);
  return {
    presets: ['@babel/preset-env', 'react-app'],
    plugins: ['@babel/plugin-transform-runtime'],
    exclude: /node_modules\/(?!imask)\/.*/,
    env: {
      test: {
        presets: [
          [
            '@babel/preset-env',
            {
              modules: 'commonjs',
              targets: {
                node: 'current',
              },
            },
          ],
          'react-app',
        ],
      },
    },
  };
};

Notice that I've tried to include imask in the bundling process here. I've tried this with and without the exclude statement.

Once my package is consumed by my app, I use Webpack to bundle my app. The Babel config here is very similar:

app Babel config:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: 'cjs',
      },
    ],
    'react-app',
  ],
  exclude: /node_modules\/(?!imask)\/.*/
};

I feel like there's something very basic I must be missing. Storybook uses Webpack under the hood, so it appears to be able to handle all of this. As a side note, using the commonJs 'IMask' (for the blocks) gives me additional, but different, problems.

Any help you can give me would be greatly appreciated.

[uNmAnNeR]

@cutterbl tricky one, needs investigation. Sandbox works fine for me (except the absence of onComplete handler in datepicker). Can you track in which place exactly this error occurs?

[cutterbl]

CodeSandbox working is my fault. I went in there to try to figure something out, and forgot to fork it when I did it. I've reset it to show it breaking. Here's the brief synopsis of what works and what doesn't.

If I try to use the esm imports, as specified in the Guide, then it breaks after bundling, giving me the error noted above, when I start typing in the field.

import IMask from "imask/esm/imask";
import "imask/esm/masked/range";
import "imask/esm/masked/enum";

The error, when trying to handle it the tree shaking way, appears to be directly tied to a lack of Helper Aliasing, typically handled by the @babel/plugin-transform-runtime.

If, instead, I import directly from react-imask, then it does not.

import { IMaskInput } from "react-imask";

[uNmAnNeR]

@cutterbl but import IMask from "imask/esm/imask"; imports import './_rollupPluginBabelHelpers-6ccb1f64.js'; which contains helpers.

So yeah, i see you made a lot of deep investigations which can help to improve imask. I am open to further discussions or PR's to make imask working properly with tree shakers.

[uNmAnNeR]

seems like we have to use @babel/plugin-transform-runtime instead of bundling check https://github.com/babel/babel/issues/9853#issuecomment-619587386

[cutterbl]

@uNmAnNeR Seeing the 6.4.3 alpha. Any chance this fix/change might make it in to 6.4.3?