Uncaught TypeError: Cannot read property 'length' of undefined

[questymark]

Hello, I'm getting this error whenever I try to render my app.

React 15.6.2, Webpack 1.13.1

[frontendphil]

Do you set a non null, non undefined value prop?

[t1mmen]

I'm running into this issue too, after upgrading from 0.6 to 1.2.0. It only occurs when I build for production.

Here are some relevant screenshots:

console.log output (nb, keys are slightly different in screenshot above, but it's the same data being outputted)

Webpack 1.13.2, React 15.4.2.

[t1mmen]

I can confirm that react-mentions@0.6.4 does not have this problem for me.

It looks like substyle and/or lodash could be playing a role here. On v1.2.0, I attempted to upgrade each to their latest versions, npm run transpile and copy the contents of lib to my local node_modules/react-mentions/lib, but no dice:

[saidymadi]

I believe I worked around this issue as follow

[questymark]

I solved this problem. I've delete lodash-webpack-plugin from my project.

[t1mmen]

Seems like lodash-webpack-plugin could be the cause of this issue -- we're using it for production builds as well.

[delgermurun]

I've got this error on version 2.0.1.

I think I faced with some kind of edge case.

markup prop on MentionsInput is

markup={'[`__type____display__`](__id__)'}

When input has below text

...

`Example link`](https://example.com)

...

I tried to [ to beginning of "Example...." line. Then I got error.

Stack trace says error is from https://github.com/signavio/react-mentions/blob/6833d48dc0581990e793179a813e90469483d314/src/utils.js#L193 this line.

I think display is undefined here.

Please take a look at it. Thanks a lot.

[jfschwarz]

While I didn't try reproducing it yet, I suspect that your markup pattern might be problematic because the __type__ and __display__ placeholders are not separated by any markup characters. Thus, react-mentions won't be able to tell where the type section ends and where the display section starts. Note that both placeholders are optional, so a markup value of '[__display__](__id__)' would probably work for you.

[delgermurun]

@jfschwarz Thank you for reply.

Removing __type__ from markup broke mentioning. I guess it is because of we have a multiple types of mentions.

Separating __type__ and __display__ (such as __type__|__display__) by character fixes error. But we do need to do by such way (__type____display__) because of UI reason. It works fine until above problem comes up.

[jfschwarz]

How do you want to split the markup substring between the square brackets into the two components for type and display? You will have to define a regexp for this, which you can pass via regexp prop to the <MentionsInput /> component. Note that this is an advanced feature and it is not properly documented yet. Taking a look at this PR will probably at least help a bit: https://github.com/signavio/react-mentions/pull/255

Since you write that you need that specific markup "because of UI reason", you might also see for yourself if the displayTransform prop (see docs) might be a solution. Then you could introduce a delimiter in the markup while keeping full control over how a mention is displayed to the user.

Finally, you could also do a value mapping in a custom wrapper component around MentionsInput. This component could parse your markup and put delimiters at the right places and then pass this transformed value down to the wrapped <MentionsInput />. In the onChange handler you would have to apply the inverse value mapping (remove the delimiters) so that you propagate the correct markup for the updated value to the outside.

[isakulaksiz]

I've same error.Could you help me please? How did you solve it ?

[jayacados]

I'm also running into this issue as well in production. I've tried this fix and can't seem to resolve it. Any solutions on this?

[manglaaseem28]

Pretty weird in one component .length runs perfectly fine, but in a different component, this was showing an error. TypeError: Cannot read property 'length' of undefined Please Help

[anogray]

I had the same issue but

it was mine mistake as I pushed frontend but didn't push backend changes.

[kinjaldave-tech]

I had the same issue but

it was mine mistake as I pushed frontend but didn't push backend changes.

hey i'm getting same error how to solve it?