Error in ./node_modules/imask/esm/masked/number.js Module parse failed: Unexpected token (9:24)

[kim-arthur]

Describe the bug
After publishing imask 7.2.0 we've encountered the following error:

error  in ./node_modules/imask/esm/masked/number.js

Module parse failed: Unexpected token (9:24)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| /** Number mask */
| class MaskedNumber extends Masked {
>   static UNMASKED_RADIX = '.';
|   static EMPTY_VALUES = [...Masked.EMPTY_VALUES, 0];
|   static DEFAULTS = {

To Reproduce
To reproduce run yarn && yarn build with installed vue-imask package.

Temporary solution
We added to package.json and freezed vue-imask version to 7.1.3.

  "resolutions": {
    "imask": "7.1.3"
  }

I suppose that the reason is that vue-imask depends on imask package. So when we tried to fix vue-imask version only, we still got the same error.

[Alexey Kryazhev]

@kim-arthur i use babel target > 0.25%, not dead, not android < 100 and the condition has not changed from the 7.1.3.
So it seems that more browsers support static properties now and babel keeps it as is. Looks good to me. If you need to support obsolete environments you can include imask and a plugin to be transpiled.

[Artur Almeida Junior]

I'm facing the same issue, the project that I use is kinda legacy, so a lot of old dependencies, so far I've tried:

• updating babel/core and all of its plugins
• changed the 'proposal-class-properties' to 'transform-class-properties' which is the one recommended from the babel website.
• updated babel-loader from 8.0.6 to 8.3.0, this one maybe doesn't even matter, but I tried.
• my rule in the webpack is configured like so:

  test: /\.jsx?$/,
  exclude: /(node_modules|bower_components)/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true,
        presets: [
          ['@babel/preset-env', { targets: 'IE 11', modules: 'commonjs' }],
          '@babel/preset-react'
        ],
        plugins: [
          '@babel/plugin-transform-class-properties',
          '@babel/plugin-transform-classes'
        ]
      }
    }
  ]

Nothing changed from the last version of react-imask the only difference is the @babel/plugin-transform-class-properties that @babel/plugin-proposal-class-properties, which still has no difference.
And my babel config file plugins does include the @babel/plugin-transform-class-properties.
Not sure what else to test/change, any idea on what could possibly be the reason?

edit:
When updating my react-imask to 7.3.0, it just won't load, to make it work with the old version I need to reset the yarn.lock to my base and then build, everything else the same.

[Alexey Kryazhev]

@zhyph in your case all node_modules are excluded. Do not exclude imask/react-imask if you want it to be transpiled.

[Artur Almeida Junior]

@zhyph in your case all node_modules are excluded. Do not exclude imask/react-imask if you want it to be transpiled.

Yes, that worked, before that I tried including only react-imask because I forgot about imask itself.
Adding this to my webpack exclude solved my issue for anyone that comes across this post:

modulePath =>
          /node_modules/.test(modulePath) &&
          !/node_modules\/(react-imask|imask)/.test(modulePath)

And this is the whole rule:

{
        test: /\.jsx?$/,
        exclude: modulePath =>
          /node_modules/.test(modulePath) &&
          !/node_modules\/(react-imask|imask)/.test(modulePath),
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [...],
              plugins: [
                ...,
                '@babel/transform-class-properties',
                ...
              ]
            }
          }
        ]
      }

Thanks for the insight @uNmAnNeR