remcohaszing / rehype-mermaid

A rehype plugin to render mermaid diagrams
MIT License
80 stars 8 forks source link

TypeError: Cannot read properties of undefined (reading 'baseVal') #5

Closed zeitderforschung closed 1 year ago

zeitderforschung commented 1 year ago

I get an error, when rendering the following mermaidjs diagram with rehype-mermaidjs 2.0.0 that is caused by mermaid-isomorphic 2.1.0. All the other diagrams I have tested work fine.

graph LR
A[Confirmed cases] -->|62%| B[Suspected cases]
A -->|15%| C[Diagnosed cases]
A -->|1%| D[Asymptomatic cases]
A -->|2.3%| E[Case-fatality rate]
A -->|3.8%| F[Health care personnel infected]
A -->|81%| G[Mild cases]
A -->|14%| H[Severe cases]
A -->|5%| I[Critical cases]
A -->|80 years: 3%<br>30-79 years: 87%<br>20-29 years: 8%<br>10-19 years: 1%<br><10 years: 1%| J[Age distribution]
A -->|64%| K[Secondary transmission among close contacts]
A -->|The Chinese government has improved its epidemic response capacity since the 2002-2003 SARS outbreak| L[Lessons learned]
image
remcohaszing commented 1 year ago

Thanks for reporting this. I would like to fix this ASAP, but I'm very busy this week. You can try to fix it yourself of you want.

The issue comes from https://github.com/remcohaszing/mermaid-isomorphic/blob/main/browser.ts#L42

zeitderforschung commented 1 year ago

I guess it's related to the DOM Parser that fails on parsing the svg due to missing enclosing tags. A workaround would be replacing the parser by something like this as you proposed here:

const wrapper = document.createElement('div')
wrapper.innerHTML = svg
const element = wrapper.firstChild as SVGSVGElement
remcohaszing commented 1 year ago

I fixed it upsteam. You can pull in the fix by updating mermaid-isomorphic in your lockfile.