Uncaught TypeError: Cannot read property 'key' of undefined JS error

[narayankj]

Uncaught TypeError: Cannot read property 'key' of undefined
at pie-configure.js:14251
at List.__iterate (pie-configure.js:18071)
at List.forEach (pie-configure.js:20246)
at Changes$6.normalizeNodeByPath (pie-configure.js:14250)
at Change.call (pie-configure.js:14659)
at Change.(anonymous function) [as normalizeNodeByPath] (http://localhost:8082/pie/pie-configure.js:14759:15)
at Changes$6.normalizeParentByPath (pie-configure.js:14259)
at Change.call (pie-configure.js:14659)
at Change.(anonymous function) [as normalizeParentByPath] (http://localhost:8082/pie/pie-configure.js:14759:15)
at Changes$2.removeNodeByPath (pie-configure.js:9787)
(anonymous) @ pie-configure.js:14251
List.__iterate @ pie-configure.js:18071
forEach @ pie-configure.js:20246
Changes$6.normalizeNodeByPath @ pie-configure.js:14250
call @ pie-configure.js:14659
Change.(anonymous function) @ pie-configure.js:14759
Changes$6.normalizeParentByPath @ pie-configure.js:14259
call @ pie-configure.js:14659
Change.(anonymous function) @ pie-configure.js:14759
Changes$2.removeNodeByPath @ pie-configure.js:9787
call @ pie-configure.js:14659
Change.(anonymous function) @ pie-configure.js:14759
Changes$2.(anonymous function) @ pie-configure.js:10233
call @ pie-configure.js:14659
Change.(anonymous function) @ pie-configure.js:14759
defaultNormalize @ pie-configure.js:11285
(anonymous) @ pie-configure.js:11094
iterate @ pie-configure.js:14316
iterate @ pie-configure.js:14336
normalizeNode @ pie-configure.js:14339
normalizeNodeAndChildren @ pie-configure.js:14294
Changes$6.normalizeNodeByPath @ pie-configure.js:14244
call @ pie-configure.js:14659
Change.(anonymous function) @ pie-configure.js:14759
Changes$6.normalizeParentByPath @ pie-configure.js:14259
call @ pie-configure.js:14659
Change.(anonymous function) @ pie-configure.js:14759
Changes$2.removeNodeByPath @ pie-configure.js:9787
call @ pie-configure.js:14659
Change.(anonymous function) @ pie-configure.js:14759
Changes$2.(anonymous function) @ pie-configure.js:10233
call @ pie-configure.js:14659
Change.(anonymous function) @ pie-configure.js:14759
defaultNormalize @ pie-configure.js:11285
(anonymous) @ pie-configure.js:11094
iterate @ pie-configure.js:14316
normalizeNode @ pie-configure.js:14339
normalizeNodeAndChildren @ pie-configure.js:14294
normalizeNodeAndChildren @ pie-configure.js:14280
normalizeNodeAndChildren @ pie-configure.js:14280
normalizeNodeAndChildren @ pie-configure.js:14280
Changes$6.normalizeNodeByKey @ pie-configure.js:14190
call @ pie-configure.js:14659
Change.(anonymous function) @ pie-configure.js:14759
Changes$6.normalizeDocument @ pie-configure.js:14168
call @ pie-configure.js:14659
Change.(anonymous function) @ pie-configure.js:14759
Changes$6.normalize @ pie-configure.js:14155
call @ pie-configure.js:14659
Change.(anonymous function) @ pie-configure.js:14759
fromJSON @ pie-configure.js:13052
deserialize @ pie-configure.js:90449
htmlToValue @ pie-configure.js:33352
EditableHtml @ pie-configure.js:24812
constructClassInstance @ pie-configure.js:70202
updateClassComponent @ pie-configure.js:71899
beginWork @ pie-configure.js:72579
performUnitOfWork @ pie-configure.js:74618
workLoop @ pie-configure.js:74657
callCallback @ pie-configure.js:58854
invokeGuardedCallbackDev @ pie-configure.js:58892
invokeGuardedCallback @ pie-configure.js:58941
replayUnitOfWork @ pie-configure.js:74065
renderRoot @ pie-configure.js:74717
performWorkOnRoot @ pie-configure.js:75315
performWork @ pie-configure.js:75237
performSyncWork @ pie-configure.js:75209
requestWork @ pie-configure.js:75109
scheduleWork$1 @ pie-configure.js:74973
scheduleRootUpdate @ pie-configure.js:75540
updateContainerAtExpirationTime @ pie-configure.js:75567
updateContainer @ pie-configure.js:75594
ReactRoot.render @ pie-configure.js:75877
(anonymous) @ pie-configure.js:76017
unbatchedUpdates @ pie-configure.js:75434
legacyRenderSubtreeIntoContainer @ pie-configure.js:76013
render @ pie-configure.js:76072
_render @ pie-configure.js:155600
set model @ pie-configure.js:155566
window.pie-controller-pie-item.(anonymous function).model.then.uiModel @ main.js:35
Promise.then (async)
updateElement @ main.js:22
setTimeout @ main.js:14
setTimeout (async)
renderPIE @ main.js:13
data.models.forEach @ MultipleChoice_Edit_Example.html:97
(anonymous) @ MultipleChoice_Edit_Example.html:93
j @ jquery-1.11.1.min.js:2
fireWith @ jquery-1.11.1.min.js:2
x @ jquery-1.11.1.min.js:4
b @ jquery-1.11.1.min.js:4
XMLHttpRequest.send (async)
send @ jquery-1.11.1.min.js:4
ajax @ jquery-1.11.1.min.js:4
m.(anonymous function) @ jquery-1.11.1.min.js:4
getJSON @ jquery-1.11.1.min.js:4
(anonymous) @ MultipleChoice_Edit_Example.html:92
pie-configure.js:72981 The above error occurred in the component:
in EditableHtml
in div (created by FormControl)
in FormControl (created by WithStyles(FormControl))
in WithStyles(FormControl) (created by RawInputContainer)
in RawInputContainer (created by WithStyles(RawInputContainer))
in WithStyles(RawInputContainer)
in div
in Unknown (created by WithStyles(Component))
in WithStyles(Component) (created by Main)
in div (created by Main)
in Main (created by WithStyles(Main))
in WithStyles(Main) (created by Root)
in Root

demo: http://sbox.powermylearning.org/piedemo/MultipleChoice_Edit_Example.html
config: https://github.com/paritoshcardinal/pie_elements_demo/blob/master/mc/config2.json

[lakatosandrei]

@narayankj
I just investigated this and it has nothing to do with our package, this is happening because of slate. Not sure exactly what's the reason.
I managed to get it working by altering the promptLabel.

Previously it was:

<div>Which of these statements are ways to describe this picture?​<div><br><div style=\"text-align: left;\"><img style=\"width: 402px; height: 225px;\" src=\"http://sbox.powermylearning.org/media/content/assets/userpromptimages/8edfe692-b757-4b62-86cc-f6fbecf65d7f_1525198011816-5ae8ab1de4b067bbcd36f942.PNG\"></div>​<div><br><div></div>​​​<div></div>​<div><br></div></div></div></div>

Better indented:

<div>Which of these statements are ways to describe this picture?​
    <div><br>
        <div style="text-align: left;"><img style="width: 402px; height: 225px;"
                                            src="http://sbox.powermylearning.org/media/content/assets/userpromptimages/8edfe692-b757-4b62-86cc-f6fbecf65d7f_1525198011816-5ae8ab1de4b067bbcd36f942.PNG">
        </div>
        ​
        <div><br>
            <div></div>
            ​​​
            <div></div>
            ​
            <div><br></div>
        </div>
    </div>
</div>

If I remove the unnecessary div's it becomes

<div>Which of these statements are ways to describe this picture?​
    <div><br>
        <div style="text-align: left;"><img style="width: 402px; height: 225px;"
                                            src="http://sbox.powermylearning.org/media/content/assets/userpromptimages/8edfe692-b757-4b62-86cc-f6fbecf65d7f_1525198011816-5ae8ab1de4b067bbcd36f942.PNG">
        </div>
    </div>
</div>

Which works fine, I tested it on my local environment using your repo.

[narayankj]

@lakatosandrei You are right and we are aware of it. Issue is lot (they are in 1000s) of CoreSpring imported items have HTML like mentioned above and doesn't work with PIE.

[lakatosandrei]

@edeustace
I guess I need to think of a way of altering the incoming markup in order to make it work.