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

[juliensl]

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 :smile:

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 !

[quantizor]

I’d recommend doing an || ‘’ in places where you think the content might be undefined to work around this. We can add some handling in the library as well.

Gatsby pre-renders all your pages to HTML so that’s why you’re seeing the error during the build process.

[juliensl]

Hi @probablyup Yes, it works with this workaround, thank you !

I think some handling could be nice ;)

Do I close the issue or do you want to keep it as a reminder ?

[quantizor]

Can keep it open, thanks!

[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

[pelusanchez]

I will fork this and try to work on it.

[quantizor]

No fork needed, just make sure you're passing in real content and put a fallback string if necessary.

[pelusanchez]

So, Why is this labeled as help wanted and not closed?