decaporg / decaporg/decap-cms

"TypeError: e.get is not a function" when an editor widget has a nested list

Open
#1,372 10 comments 2 reactions 0 assignees View on GitHub
area: extensions/editor-components kind: bug pinned status: confirmed
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

**- Do you want to request a *feature* or report a *bug*?**

*bug*

**- What is the current behavior?**

I have a custom editor component that encapsulates some structured data, particularly a `list` field with a `markdown` widget inside it: https://github.com/papandreou/netlify-test-2/blob/e91791c56ecb441d0867a79f66e79aa678bfd995/admin/index.html#L65-L71

This appears to work fine in the editor when I create a new component. The markdown editor expands correctly, and I can add all the `learnings` I want, and expanding/collapsing the widget works fine. When I publish, it also serializes to the format that I would expect: https://raw.githubusercontent.com/papandreou/netlify-test-2/master/lessons/2018-05-22-my-new-lesson.md

However, when I load the document again (or switch to markdown mode and back) and try to expand the custom widget, the following error happens, similar to #1353:

```
react-dom.production.min.js:164 TypeError: e.get is not a function
at t.value (ListControl.js:204)
at Hn.renderItem (ListControl.js:245)
at Array.map ()
at ListControl.js:47
at beginWork (react-dom.production.min.js:132)
at r (react-dom.production.min.js:161)
at i (react-dom.production.min.js:161)
at a (react-dom.production.min.js:162)
at k (react-dom.production.min.js:169)
at _ (react-dom.production.min.js:168)
```

From debugging a bit, I can tell that the `fromBlock` method of my custom widget returns the following, which appears to be correct:

```json
{
"foobars": [
{
"foobar": "Here is **one** foobar"
}
],
"image": "/images/uploads/screen-shot-2018-02-26-at-15.18.22.png",
"title": "the title"
}
```

**- If the current behavior is a bug, please provide the steps to reproduce.**

It seems like the error is reproducible in a simpler setting that does not depend on my custom patches or the `markdown` widget, so the steps are:

1. Declare a custom editor component:

```js
CMS.registerEditorComponent({
// Internal id of the component
id: "SimpleListWidget",
// Visible label
label: "SimpleListWidget",
// Fields the user need to fill out when adding an instance of the component
fields: [
{name: 'foobars', label: 'Foobars', widget: 'list', fields: [
{name: 'foobar', label: 'Foobar', widget: 'string'}
]}
],
// Pattern to identify a block as being an instance of this component
pattern: /^SimpleListWidget (\S*)/,
// Function to extract data elements from the regexp match
fromBlock: function(match) {
var obj = {
foobars: []
}
match[1].split(',').forEach(function (foobar) {
if (foobar !== '') {
obj.foobars.push({foobar: foobar});
}
});
return obj;
},
// Function to create a text block from an instance of this component
toBlock: function(obj) {
return 'SimpleListWidget ' + (obj.foobars || []).map(entry => entry.foobar).join(',');
},
// Preview output for this component. Can either be a string or a React component
// (component gives better render performance)
toPreview: function(obj) {
return (
'Here is my SimpleListWidget with ' + JSON.stringify(obj)
);
}
});
```

2. Open the editor and add a `SimpleListWidget` to a markdown field in rich text mode
3. Click "Add Foobar +" and enter some text
4. Switch to markdown mode
5. Switch back to rich text mode

**- What is the expected behavior?**

That the `SimpleListWidget ...` block turns back into a component in rich text mode.

**- Please mention your versions where applicable.**

Netlify CMS version: 1.8.0
Browser version: Chrome 66.0.3359.181/OSX

Node.JS version: 9.5.0 (but doesn't matter as this happens in the browser)
Operating System: OSX

**- Please link or paste your `config.yml` below if applicable.**

https://github.com/papandreou/netlify-test-2/blob/1503df31b0cdc59db5739dd846c038db80221858/admin/config.yml

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.