Error in ./node_modules/imask/esm/masked/number.js Module parse failed: Unexpected token (9:24)
kim-arthur opened this issue · comments
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.
@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.
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
from8.0.6
to8.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.
@zhyph in your case all node_modules
are excluded. Do not exclude imask
/react-imask
if you want it to be transpiled.
@zhyph in your case all
node_modules
are excluded. Do not excludeimask
/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