undefined is not an object (evaluating 'e.slice')

[ekilah]

After upgrading to 1.6.0 from 1.4.10 as a part of working around https://github.com/nosir/cleave.js/issues/593 , I have now seen this come up twice in bug reports:

TypeError undefined is not an object (evaluating 'e.slice') 
    ../node_modules/cleave.js/dist/cleave-react-node.js:2536 getPostDelimiter
    ../node_modules/cleave.js/dist/cleave-react-node.js:344 onChange
    [native code] onChange
    ../node_modules/react-dom/cjs/react-dom.production.min.js:15:202 ka
    ../node_modules/react-dom/cjs/react-dom.production.min.js:15:355 qa
    ../node_modules/react-dom/cjs/react-dom.production.min.js:16:31 ra
    ../node_modules/react-dom/cjs/react-dom.production.min.js:16:235 wa
    ../node_modules/react-dom/cjs/react-dom.production.min.js:17:239 Aa
    [native code] forEach
    ../node_modules/react-dom/cjs/react-dom.production.min.js:17:19 ya
    ../node_modules/react-dom/cjs/react-dom.production.min.js:17:411 Ba
    ../node_modules/react-dom/cjs/react-dom.production.min.js:85:402 Pd
    ../node_modules/react-dom/cjs/react-dom.production.min.js:87:246 Ud
    [native code] Be
    ../node_modules/scheduler/cjs/scheduler.production.min.js:20:126 
    ../node_modules/react-dom/cjs/react-dom.production.min.js:207:389 fj
    ../node_modules/react-dom/cjs/react-dom.production.min.js:86:239 Sd
    [native code] je

I haven't figured out how to reproduce it yet, but the relevant code seems to have been changed recently at https://github.com/nosir/cleave.js/pull/582

So far the bug has happened on this device:

Safari 13.0.5
en-US
Mac OS X 10.15

[ekilah]

there's a chance @CmdrRamon will understand, if @nosir doesn't see it first

[hugobally]

@ekilah I'm having the same issue, you can repro by right clicking an empty input field and pasting from clipboard - lastInputValue is undefined which causes the exception. Any update on this ?

[ekilah]

@hugobally oh cool, glad someone could figure out how to reproduce.

If you want a fix and don't need the rawValue functionality, I worked around it in a fork and it has been stable for the last couple weeks.

To add the fork in your package.json dependencies, for example:

"cleave.js": "https://github.com/MercuryTechnologies/cleave.js.git#rawValueFix1.4.10",

This fork reverts cleave.js to 1.4.10 - where this issue doesn't occur anymore - and also fixes #593 (as long as you don't need the rawValue from this library.

We'll see if the live version gets a fix, but until then, hope that helps!

[psiclopz]

I was also able to reproduce this consistently by clicking into an empty cleave field, and then clicking on a different window altogether (off the browser).

Note, this seems to only happen the first time you click into and then out of the empty field after the page initially renders and if you call setRawValue. getPostDelimiter gets called twice, the first time with value as undefined, the second time with the value passed to setRawValue. This does not happen if you set an initial value to the field of a non-empty string, as that fires the getPostDelimiter with that initial value on render. But an empty string '' does not fire getPostDelimiter.

For now, I've had to fork this with the following code at the top of getPostDelimiter: if (value === null || value === undefined) { return ''; }

[rythos42]

Sounds like the repro steps are understood, but we get this from an extension one of our developers made that auto-fills in a form and just started getting this when we upgraded to 1.6.

I'm going to downgrade to 1.5.10 where it looks like this error won't exist, until this issue is resolved! Thanks.

[rogorman9]

Just to add another case for this, I'm getting what I think is a related bug when I try to use Enzyme's simulate function to simulate a change event on the native input element within a Jest unit test. The error I'm getting in this case is:

TypeError: Cannot read property 'slice' of undefined

      at Object.getPostDelimiter (node_modules/cleave.js/dist/cleave-react-node.js:2536:27)
      at Object.onChange (node_modules/cleave.js/dist/cleave-react-node.js:344:35)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:362:14)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:411:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:466:31)
      at invokeGuardedCallbackAndCatchFirstError (node_modules/react-dom/cjs/react-dom.development.js:480:25)
      at executeDispatch (node_modules/react-dom/cjs/react-dom.development.js:612:3)
      at executeDispatchesInOrder (node_modules/react-dom/cjs/react-dom.development.js:637:5)
      at executeDispatchesAndRelease (node_modules/react-dom/cjs/react-dom.development.js:743:5)
      at executeDispatchesAndReleaseTopLevel (node_modules/react-dom/cjs/react-dom.development.js:752:10)
      at forEachAccumulated (node_modules/react-dom/cjs/react-dom.development.js:724:8)
      at runEventsInBatch (node_modules/react-dom/cjs/react-dom.development.js:769:3)
      at node_modules/react-dom/cjs/react-dom-test-utils.development.js:1596:7
      at Object.batchedUpdates$1 [as unstable_batchedUpdates] (node_modules/react-dom/cjs/react-dom.development.js:24328:12)
      at node_modules/react-dom/cjs/react-dom-test-utils.development.js:1592:14
      at eventFn (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:540:11)
      at fn (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:404:37)
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:24328:12)
      at Object.act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1120:14)
      at act (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:404:13)
      at Object.wrapAct [as simulateEvent] (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:539:9)
      at ReactWrapper.simulateEvent (node_modules/enzyme/src/ReactWrapper.js:666:22)
      at ReactWrapper.call [as single] (node_modules/enzyme/src/ReactWrapper.js:1170:21)
      at ReactWrapper.single [as simulate] (node_modules/enzyme/src/ReactWrapper.js:665:17)
      at simulate (src/utilities/tests/enzymeUtilities.js:29:13)

This doesn't happen when using Cleave version 1.5.10, it was definitely introduced in 1.6.0.

[damianthekreeeytor]

Also ran into this issue using 1.6.0 and I can confirm that downgrading until the issue has been resolved is an acceptable workaround.

[sudosubin]

I encountered the same issue, but I did not want to downgrade the Cleave.js version. The issue is that lastInputValue is undefined untill the first input, so I just initialized it with empty string. (using onInit method)

import { ComponentProps } from 'react';
import Cleave from 'cleave.js/react';

const onInit: ComponentProps<typeof Cleave>['onInit'] = (owner) => {
  (owner as any).lastInputValue = '';
};

const WrappedCleave = (props: any) => {
  return (
    <Cleave
      onInit={onInit}
      {...props}
    />
  )
};

Now it works for me. Any comment would be welcome.

[psiclopz]

The WrappedCleave component was a good idea, but it does not fix the issue I encountered with the getPostDelimiter function call being called twice with null followed by the value.

[0xc0d3r]

@nosir @ekilah Any update and reliable work-arounds for this?

[ekilah]

Please read the whole thread. I posted a workaround above: https://github.com/nosir/cleave.js/issues/601#issuecomment-653132114

We've been using this workaround since I posted it, with no further issues.