Dependency react-text-mask doesn't work with React 17

[felix-last]

When installing mson-react in our React 17-dependent application, npm raises ERESOLVE:

npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!   peer react@"^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" from [email protected]
npm ERR!   node_modules/mini-create-react-context
npm ERR!     mini-create-react-context@"^0.4.0" from [email protected]
npm ERR!     node_modules/react-router
npm ERR!       react-router@"5.2.0" from [email protected]
npm ERR!       node_modules/react-router-dom
npm ERR!         react-router-dom@"^5.2.0" from the root project
npm ERR!         1 more (mson-react)
npm ERR!   22 more (prop-types-extra, react-bootstrap, react-dom, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/mson-react/node_modules/react-text-mask
npm ERR!   react-text-mask@"^5.4.3" from [email protected]
npm ERR!   node_modules/mson-react
npm ERR!     mson-react@"^1.11.0" from the root project

It seems that the peer dependency of react-text-mask is breaking compatibility with react 17. The issue is tracked on react-text-mask, with a merge request ready, but it doesn't seem to get merged: https://github.com/text-mask/text-mask/issues/1045

Moreover, react-text-mask appears to be deprecated and unmaintained. Perhaps mson-react should use one of the alternatives proposed by the project:

⚠️ This library is not maintained. Pull-requests and issues are not monitored. Alternatives to text-mask include:

https://github.com/uNmAnNeR/imaskjs https://github.com/JsDaddy/ngx-mask

Workaround: Install with --legacy-peer-deps to ignore peer dependencies.

[redgeoff]

Thanks for reporting this @felix-last

I dug into this and unfortunately found that there isn't a suitable replacement for react-text-mask. In particular, imaskjs appears to be the emerging favorite, but it lacks a couple critical features:

1. As is shown in this sandbox the RegEx masks don't seem to work as intended. This means that we'd have to remove the capability of supporting RegEx in the mask if we were to migrate to imask

2. react-text-mask ships with a prefix attribute that allows you to define values like a currency, e.g. prefix='$'. imaskjs does not have support for such a prefix.

I'm going to have to think more about what to do here. My initial thoughts are either:

1. Adjust to using imask => yuck
2. Fork https://github.com/text-mask/text-mask and partially maintain a forked version => yuck
3. Implement a custom text mask in mson-react => yuck, and a lot of work, but perhaps tempting in the future so that such dependencies can be mitigated
4. Submit a series of PRs to imask to fix/enhance these issues

Also, I have been unable to reproduce the error with the latest mson-react, although I see why it would occur. There's even a sandbox here, where it is working.