Unable to parse latex using rehypeKatex plugin

[agrajgarg]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

react-markdown:^9.0.0

Link to runnable example

No response

Steps to reproduce

Run the following code

const preprocessLaTeX = (content) => {
        // Replace block-level LaTeX delimiters \[ \] with $$ $$
        const blockProcessedContent = content.replace(
          /\\\[(.*?)\\\]/gs,
          (_, equation) => `$$${equation}$$`,
        );
        // Replace inline LaTeX delimiters \( \) with $ $
        const inlineProcessedContent = blockProcessedContent.replace(
          /\\\((.*?)\\\)/gs,
          (_, equation) => `$${equation}$`,
        );
        return inlineProcessedContent;
    };

{text && text.length > 0 &&
                            text.map((message, index) => (
                                <div key={index} className="markdown" id="bot-msg">
                                    <ReactMarkdown
                                        remarkPlugins={[remarkMath]} 
                                        rehypePlugins={[rehypeRaw, rehypeKatex]}
                                        components={{
                                            img: ({node, ...props}) => <img style={{maxWidth: '100%'}} {...props} />
                                        }}
                                    >
                                        {preprocessLaTeX(message)}
                                    </ReactMarkdown>
                                </div>
                            ))
                        }

Expected behavior

Should render latex equations on the page3

Actual behavior

giving error:

_propertyInformation.hastToReact is undefined

Runtime

Node v17

Package manager

npm 8

OS

macOS

Build and bundle tools

Parcel

[wooorm]

Please fix your markdown. I cannot read this.

[agrajgarg]

Please fix your markdown. I cannot read this.

fixed it

[wooorm]

Thanks!

Next step, when raising an issue, is to try to make your reproduction smaller. As small as can be. Remove everything that’s not related to the error. I am quite sure that an _propertyInformation.hastToReact error does not come from your img component. Or from preprocessLaTeX.

Then, search through the existing issues. If you look for hastToReact here, you will find: https://github.com/remarkjs/react-markdown/issues/747

So, it seems that this error occurs because you use an older bundler with bugs: likely Parcel. Can you confirm this is the case?

[agrajgarg]

Thanks!

Next step, when raising an issue, is to try to make your reproduction smaller. As small as can be. Remove everything that’s not related to the error. I am quite sure that an _propertyInformation.hastToReact error does not come from your img component. Or from preprocessLaTeX.

Then, search through the existing issues. If you look for hastToReact here, you will find: #747

So, it seems that this error occurs because you use an older bundler with bugs: likely Parcel. Can you confirm this is the case?

Yes, I checked the issue disappeared by manually doing

npm install property-information

and

import 'property-information' in my component.

[github-actions[bot]]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

[github-actions[bot]]

Hi! Thanks for taking the time to contribute!

Because we treat issues as our backlog, we close duplicates to focus our work and not have to touch the same chunk of code for the same reason multiple times. This is also why we may mark something as duplicate that isn’t an exact duplicate but is closely related.

Thanks, — bb

[github-actions[bot]]

Hi team! It seems this post is a duplicate, but hasn’t been marked as such. Please post a comment w/ Duplicate of #123(no final .) to do so. See GH docs for more info.

Thanks, — bb