question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Lists (ul and ol) are broken

See original GitHub issue
Invariant Violation: convertToHTML: received block information without either a ReactElement or an object with start/end tags
at invariant (/project/node_modules/invariant/invariant.js:42:15)
    at getNestedBlockTags (/project/node_modules/draft-convert/lib/util/getNestedBlockTags.js:37:27)
    at /project/node_modules/draft-convert/lib/convertToHTML.js:111:64
 at Array.map (native)
    at /project/node_modules/draft-convert/lib/convertToHTML.js:83:34

This happens whenever there’s an ordered or unordered list. Adding the block types to the blockToHTML function has no effect. It still throws that error.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:11

github_iconTop GitHub Comments

1reaction
conielcommented, Jan 3, 2018

I just ran into this issue as well. This is what fixed it for me in case anyone else is stuck on the same problem (note the nestStart/nestEnd tags):

if (type === 'unordered-list-item') {
  return {
    start: '<li>',
    end: '</li>',
    nestStart: '<ul>',
    nestEnd: '</ul>',
  };
}
if (type === 'ordered-list-item') {
  return {
    start: '<li>',
    end: '</li>',
    nestStart: '<ol>',
    nestEnd: '</ol>',
  };
}
1reaction
stevensackscommented, Feb 1, 2017

We are using your recommended example to me from awhile back:

const draftConverter = convertToHTML({
  blockToHTML: (block) => {
    if(block.type === 'header-two'){
      return {
        start: '<h2 class="title">',
        end: '</h2>'
      }
    }
    if(block.type === 'header-three'){
      return {
        start: '<h3 class="subtitle">',
        end: '</h3>'
      }
    }
    if (block.type === 'atomic') {
      return {
        start: '',
        end: ''
      }
    } else {
      return {
        start: '<p>',
        end: '</p>'
      }
    }
  },
  entityToHTML: (entity, originalText) => {
    const src = entity.data.src;
    if (entity.type === 'image') return `<div class="content-image">${originalText}<img src="${src}"/></div>`;
    else if (entity.type === '#mention') return parsers.games.hearthstone(entity);
    else return originalText;
  }
});
Read more comments on GitHub >

github_iconTop Results From Across the Web

Why are my ul and ol lists not displaying properly in IE7?
Something seems to be breaking the display of lists ( ul and ol ) in IE7. They work fine in IE8, FF, Safari...
Read more >
H48: Using ol, ul and dl for lists or groups of links - W3C
The objective of this technique is to create lists of related items using list elements appropriate for their purposes. The ol element is...
Read more >
Outlook 365 for Windows Desktop and Lists using UL & OL
Test your email campaigns in 100+ email clients and devices. Never send another broken email again. Start your free 7 day trial.
Read more >
HTML: ol, ul, li, lists, unordered, ordered, listitem - YouTube
HTML: ol, ul, li, lists, unordered, ordered, listitem.
Read more >
Why are the unordered bullet lists displaying as ordered ...
The web standard is that if you have an unordered list (ul) then it uses bullet points, and if you use an ordered...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found