React Markdown doesn't work with parcel watch

[Kureev]

Original thread:
remarkjs/react-markdown#747

It seems that for whatever reason (see thread above) parcel does something weird in dev build so the react-markdown lib stops working when using links. Not sure what exactly triggers the issue, but prod build works fine.

.parcelrc

{
    "extends": "@parcel/config-default",
    "transformers": {
        "*.{ts,tsx}": [
            "@parcel/transformer-typescript-tsc",
            "@parcel/transformer-react-refresh-wrap"
        ]
    },
    "compressors": {
        "*.{html,css,js,svg,map}": [
            "...",
            "@parcel/compressor-gzip",
            "@parcel/compressor-brotli"
        ]
    }
}

[Kureev]

UPD: It seems that parcel tries to be smart and remove "unused" variables from the code or something (hence, passing undefined as a value instead of the imported object). Any chance this option can be disabled?

[charIeszhao]

Came across the exact same issue. Prod build works fine but dev is not working at expected

[gao-sun]

Context: [email protected], [email protected]

I tried to tweak the code around the error location, found that it looks like parcel mishandles the property-information dependency in the dev mode.

Try this workaround: Install property-information and import it before you construct the react-markdown component.

import 'property-information'; // Just import

const Component = () => <ReactMarkdown>...</ReactMarkdown>;

You can import before or after the react-markdown import, doesn't matter.

Feel free to add property-information as a dependency since it's a transitive dependency of react-mardown, as long as they are pointing to the same directory (we use pnpm). Once parcel fixes this, we can remove both the import and dependency.

[mischnic]

If this is still a problem, please open an issue with a complete reproduction.