react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

[BUG]: strokeDasharray causes `Error: dash([null], {}) invalid` error

Open jaidetree opened this issue 1 year ago • 1 comments

Describe the bug The strokeDasharray property on a line throws an error

To Reproduce Steps to reproduce the behavior including code snippet (if applies):

Create a document like the following:

const styles = StyleSheet.create({
  page: { padding: 60 },
});

const doc = (
  <Document>
    <Page style={styles.page} size="A4">
      <Svg height="210" width="500">
        <Line
          x1="0"
          y1="0"
          x2="200"
          y2="200"
          strokeWidth={2}
          stroke="rgb(255,0,0)"
          strokeDasharray="0 16"
          strokeLinecap="round"
        />
      </Svg>
    </Page>
  </Document>
);

ReactPDF.render(doc);

Results in an error:

Error: Error: dash([null], {}) invalid, lengths must be numeric and greater than or equal to zero

Reproduction URL:

https://react-pdf.org/repl?code=3187b0760ce02e004d09e01b02984605e18194a4e5600b6592803a6002764043299002806f00a06180076a0736402e191876a004d8404b305df8036000c3002f801a660a025006e66cd42458c24300c31eab180078008a180ae016d9182800f8cdb730015bb238b853a46041408524e1e053831002f647400220041001638d736748b2c00372e1822312e02287880260046593898007731612802788056594ab48cf4f300190964370eb6000f32f8cafe81f811b8b1818cc192d2d6b8f18ef805b892a5958ce80a10006b6400753a868092856df4dd83d8b88a2e00237a12a6a6a5590fb565d9eba83dc38f4c0c860351d8f13d8d8c0c21fafd7c00e4259a8100235028146a3c1e265690c066b3003d3b432e602764b8c48b012bc3c76a93acc07b2385ccc4d368004a34601403c960018a90a8d0e4051e806601b280000

Expected behavior

Expecting a dashed line to be rendered

https://developer.mozilla.org/en-US/play?id=2HO5eDrfICIq1bHgtVoPUdL7G8KOnXXMJUIGbkQGnLh0rSCSH3VOIl6d%2Fw%2BERdc1Sb5kwiE86pjQ5qRc

Screenshots

What it currently does:

image

What it should do:

image

Desktop (please complete the following information):

  • OS: MacOS
  • React-pdf version v4

jaidetree avatar Oct 06 '24 17:10 jaidetree

Looked through the code and found the problem:

https://github.com/diegomura/react-pdf/blob/c0ec5d8d434b6c936c30d36a431e53256590e0d8/packages/render/src/primitives/renderSvg.js#L56

It expects a comma separated string like 0,16 vs the whitespace separated version the docs use. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

I'm glad there's a workaround but feels like this could be improved. I am happy to draft a PR if someone wants to propose a solution strategy

jaidetree avatar Oct 06 '24 18:10 jaidetree