Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
felix-last opened this issue Oct 8, 2021 · 1 comment
Open

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

felix-last opened this issue Oct 8, 2021 · 1 comment
Labels
bug Something isn't working

Comments

@felix-last
Copy link

felix-last commented Oct 8, 2021

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

npm ERR! Found: react@17.0.1
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 mini-create-react-context@0.4.1
npm ERR!   node_modules/mini-create-react-context
npm ERR!     mini-create-react-context@"^0.4.0" from react-router@5.2.0
npm ERR!     node_modules/react-router
npm ERR!       react-router@"5.2.0" from react-router-dom@5.2.0
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 react-text-mask@5.4.3
npm ERR! node_modules/mson-react/node_modules/react-text-mask
npm ERR!   react-text-mask@"^5.4.3" from mson-react@1.11.0
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: text-mask/text-mask#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 redgeoff added the bug Something isn't working label Oct 10, 2021
@redgeoff
Copy link
Owner

redgeoff commented Oct 21, 2021

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.
    image

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants