WebpackError: TypeError: Cannot read property 'replace' of undefined

Hi everybody !

I don’t know exactly if it’s a bug or if it’s a weird behavior for me ^^

I am developing a Gatsby website, and I want to use markdown-to-jsx in. I have to pull some data, map some arrays… and use Markdown to print text on my website. The problem is Markdown doesn’t accept empty field : <Markdown></Markdown>

But, what I want to do that ?

Because I don’t want to check all times if there is a text in my variable or not : <Markdown>MyArray[0].Variable1.text</Markdown>

I just want to it to print nothing if there is nothing 😄

My logs :

2:28:33 PM:   2 | //# sourceMappingURL=index.module.js.map
2:28:33 PM:   3 | 
2:28:33 PM: 
2:28:33 PM:   WebpackError: TypeError: Cannot read property 'replace' of undefined
2:28:33 PM:   
2:28:33 PM:   - index.module.js:1 
2:28:33 PM:     node_modules/markdown-to-jsx/dist/index.module.js:1:14571
2:28:33 PM:   
2:28:33 PM:   - index.module.js:1 
2:28:33 PM:     node_modules/markdown-to-jsx/dist/index.module.js:1:15150
2:28:33 PM:   
2:28:33 PM: 
2:28:33 PM: not finished Generating image thumbnails - 133.828s
2:28:33 PM: ​
2:28:33 PM: ┌─────────────────────────────┐
2:28:33 PM: │   "build.command" failed    │
2:28:33 PM: └─────────────────────────────┘
2:28:33 PM: ​
2:28:33 PM:   Error message
2:28:33 PM:   Command failed with exit code 1: gatsby build
2:28:33 PM: ​
2:28:33 PM:   Error location
2:28:33 PM:   In Build command from Netlify app:
2:28:33 PM:   gatsby build

Is it a bug or it is normal ?

Thank you everybody !

[juliensl]

Hi !

I am coming back on this bug. I had a similar error today :

WebpackError: TypeError: t.replace is not a function

Only because I forget a space in my Markdown tag : <Markdown> {TitlePlateforme || ""}</Markdown> ( between the <Markdown> and the {Title... )

Maybe you should prevent this too ? 😃

Have a good day !

[Prabhakar-Poudel]

I think you should create a separate component:

const YourMarkdown = ({children, ...props}) => {
  if (!children?.length) return <></>
  return <Markdown {...props}>{children}</Markdown>
}

And replace all Markdown component use with YourMarkdown