React-markdown: Cannot unwrap specific disallowed types like "inlineCode"

[ScarellaDev]

Hello!

I'm using your node module to render Markdown in a React component but I only want emphasis, bold and links to be rendered.

Unfortunately, I alway get errors when enabling the unwrapDisallowed option on specific types, for example inlineCode. I tried writing some unit tests to check that they are correctly unwrapped but I always get an error.

Here is the test code:

const text = "`inlineCode`";
      const component = shallow(<Markdown
        source={text}
        allowedTypes={[
          "break",
          "paragraph",
          "emphasis",
          "strong",
          "link",
        ]}
        escapeHtml
        unwrapDisallowed
      />);
      expect(component.find(".Markdown code")).to.have.length(0);
      expect(component.find(".Markdown").text()).to.equal("inlineCode");

I'm using the versions 3.1.4 of react-markdown and 2.5.1 of enzyme.

And everytime I run the test, I get the following stacktrace:

    undefined is not an object (evaluating 'node.type')
    astToReact@/node_modules/react-markdown/lib/ast-to-react.js:10:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:162653:11
    /node_modules/react-markdown/lib/ast-to-react.js:27:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:162670:24
    map@[native code]
    resolveChildren@/node_modules/react-markdown/lib/ast-to-react.js:26:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:162669:46
    astToReact@/node_modules/react-markdown/lib/ast-to-react.js:23:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:162666:88
    /node_modules/react-markdown/lib/ast-to-react.js:27:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:162670:24
    map@[native code]
    resolveChildren@/node_modules/react-markdown/lib/ast-to-react.js:26:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:162669:46
    astToReact@/node_modules/react-markdown/lib/ast-to-react.js:23:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:162666:88
    ReactMarkdown@/node_modules/react-markdown/lib/react-markdown.js:40:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:162982:20
    /node_modules/react-dom/lib/ReactCompositeComponent.js:306:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:145349:25
    measureLifeCyclePerf@/node_modules/react-dom/lib/ReactCompositeComponent.js:75:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:145118:14
    _constructComponentWithoutOwner@/node_modules/react-dom/lib/ReactCompositeComponent.js:305:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:145348:34
    mountComponent@/node_modules/react-dom/lib/ReactCompositeComponent.js:188:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:145231:40
    mountComponent@/node_modules/react-dom/lib/ReactReconciler.js:46:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:151601:49
    _render@/node_modules/react-dom/lib/ReactShallowRenderer.js:126:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:152279:37
    _batchedRender@/node_modules/react-dom/lib/ReactShallowRenderer.js:79:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:152232:19
    batchedUpdates@/node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:60:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:149355:22
    batchedUpdates@/node_modules/react-dom/lib/ReactUpdates.js:97:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:153023:41
    render@/node_modules/react-dom/lib/ReactShallowRenderer.js:106:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:152259:32
    render@/node_modules/enzyme/build/react-compat.js:158:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:60906:43
    /node_modules/enzyme/build/ShallowWrapper.js:90:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:58885:32
    perform@/node_modules/react-dom/lib/Transaction.js:140:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:154910:24
    batchedUpdates@/node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:149357:33
    batchedUpdates@/node_modules/react-dom/lib/ReactUpdates.js:97:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:153023:41
    /node_modules/enzyme/build/ShallowWrapper.js:89:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:58884:41
    withSetStateAllowed@/node_modules/enzyme/build/Utils.js:204:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:60509:5
    ShallowWrapper@/node_modules/enzyme/build/ShallowWrapper.js:88:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:58883:38
    shallow@/node_modules/enzyme/build/shallow.js:19:0 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:61024:41
    /src/components/src/frameworks/text/Text.spec.js:183:35 <- /tmp/39ddccf0b57b3df5916088ae8a762714.browserify:254762:46

Do you have any idea why the unwrap is not working for specific types?

Thanks for your help.

[gettinToasty]

I'm also running this issue. It's especially important as we use ES6 template literals for our markdown, which the parser somehow captures the backticks of and tries to format it in pre and code tags, which is very undesired.

@ScarellaDev a temporary work-around I've found for this is using the renderers prop like so:

<ReactMarkdown
  source={source}
  renderers={{ code: ({ value }) => <ReactMarkdown source={value} /> }}
/>

[ashishsc]

Experiencing it here too unfortunately.

[bjudson]

Instead of unwrapping, you can disable the parsers you don't want to use with the remark-disable-tokenizers plugin.

See this comment for an example: https://github.com/rexxars/react-markdown/issues/111#issuecomment-427081752