[Bug]: Cannot read properties of undefined (reading 'cloneNode')

[natuan62]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

6.0.0-beta10

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

18.0.0

Link To Reproduction

https://codesandbox.io/s/gracious-davinci-qvdr82?file=/src/App.vue

Steps To Reproduce

fabric.loadSVGFromString with svg content

I think this block cause error

xlink:href="#ding" access to ding id not exist

  <use
      id="use6112"
      style="stroke:#4949e3;stroke-width:10.63"
      xlink:href="#ding"
      transform="translate(-835.03 468.69)"
      height="1052.3622"
      width="744.09448"
      y="0"
      x="0"
  />

Here is svg content

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns:ns1="http://sozi.baierouge.fr"
    id="svg5319"
    sodipodi:docname="basbeima_Face_1.svg"
    viewBox="0 0 627.53 689.12"
    sodipodi:version="0.32"
    version="1.0"
    inkscape:output_extension="org.inkscape.output.svg.inkscape"
    inkscape:version="0.46"
  >
  <sodipodi:namedview
      id="base"
      bordercolor="#666666"
      inkscape:pageshadow="2"
      guidetolerance="10.0"
      pagecolor="#ffffff"
      gridtolerance="10.0"
      inkscape:zoom="0.43901235"
      objecttolerance="10.0"
      borderopacity="1.0"
      inkscape:current-layer="svg5319"
      inkscape:cx="8.7317258"
      inkscape:cy="526.18109"
      inkscape:window-y="-4"
      inkscape:window-x="1276"
      inkscape:window-height="975"
      showgrid="false"
      inkscape:pageopacity="0.0"
      inkscape:window-width="1280"
  />
  <path
      id="path6124"
      sodipodi:nodetypes="ccccccccc"
      style="stroke:#565658;stroke-width:8.5106;fill:#fff6c4"
      d="m218.32 4.2553c-181.14 3.1612-213.57 151.95-214.06 299.05 1.1385 84.1 0.1359 169.1 2.6904 252.59 14.464 89.17 83.085 128.1 151.25 128.96 109.95-0.58 219.58 0.61 329.75-1.12 46.09-2.91 109.78-34.61 130.13-106.11 8.63-121.27 4.54-246.25 1.64-368.02-14.44-89.19-83.09-128.09-151.25-128.96-104.89 0.142-356.02 107.6-250.15-76.395z"
  />
  <use
      id="use6112"
      style="stroke:#4949e3;stroke-width:10.63"
      xlink:href="#ding"
      transform="translate(-835.03 468.69)"
      height="1052.3622"
      width="744.09448"
      y="0"
      x="0"
  />
  <rect
      id="rect6126"
      style="stroke-opacity:.24376;fill-rule:evenodd;stroke:#b5b8b8;stroke-width:9.0269;fill:#ffe1f9"
      ry="55.502"
      height="411.43"
      width="462.22"
      y="194.37"
      x="82.655"
  />
  <path
      id="rect6119"
      sodipodi:nodetypes="ccccc"
      style="fill-rule:evenodd;stroke:#49c2e3;stroke-width:8.5106;fill:#ffd5d5"
      d="m169.9 505.22c103.22 54.62 199.13 41.87 287.72 0v28.2c-73.98 41.87-189.98 58.25-287.72 0v-28.2z"
  />
  <g
      id="g6130"
      transform="matrix(.80205 0 0 .79921 622.57 25.063)"
    >
    <path
        id="path6115"
        sodipodi:rx="46.695724"
        sodipodi:ry="86.55793"
        style="fill-rule:evenodd;stroke:#4949e3;stroke-width:10.63;fill:#000080"
        sodipodi:type="arc"
        d="m-282.59 166.01a46.696 86.558 0 1 1 -1.76 -30.99l-44.8 24.43z"
        transform="translate(-175.39 216.4)"
        sodipodi:cy="159.44882"
        sodipodi:cx="-329.14792"
        sodipodi:end="5.9970652"
        sodipodi:start="0.075913405"
    />
    <path
        id="path6117"
        sodipodi:rx="46.695724"
        sodipodi:ry="86.55793"
        style="fill-rule:evenodd;stroke:#4949e3;stroke-width:10.63;fill:#000080"
        sodipodi:type="arc"
        d="m-282.59 166.01a46.696 86.558 0 1 1 -1.76 -30.99l-44.8 24.43z"
        transform="translate(63.78 216.4)"
        sodipodi:cy="159.44882"
        sodipodi:cx="-329.14792"
        sodipodi:end="5.9970652"
        sodipodi:start="0.075913405"
    />
  </g
  >
  <metadata
    >
    <rdf:RDF
      >
      <cc:Work
        >
        <dc:format
          >image/svg+xml</dc:format
        >
        <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage"
        />
        <cc:license
            rdf:resource="http://creativecommons.org/licenses/publicdomain/"
        />
        <dc:publisher
          >
          <cc:Agent
              rdf:about="http://openclipart.org/"
            >
            <dc:title
              >Openclipart</dc:title
            >
          </cc:Agent
          >
        </dc:publisher
        >
        <dc:title
          >Face 1</dc:title
        >
        <dc:date
          >2008-08-08T11:45:08</dc:date
        >
        <dc:description
          >a simple face</dc:description
        >
        <dc:source
          >https://openclipart.org/detail/18341/face-1-by-basbeima</dc:source
        >
        <dc:creator
          >
          <cc:Agent
            >
            <dc:title
              >basbeima</dc:title
            >
          </cc:Agent
          >
        </dc:creator
        >
        <dc:subject
          >
          <rdf:Bag
            >
            <rdf:li
              >cartoon</rdf:li
            >
            <rdf:li
              >colour</rdf:li
            >
            <rdf:li
              >face</rdf:li
            >
          </rdf:Bag
          >
        </dc:subject
        >
      </cc:Work
      >
      <cc:License
          rdf:about="http://creativecommons.org/licenses/publicdomain/"
        >
        <cc:permits
            rdf:resource="http://creativecommons.org/ns#Reproduction"
        />
        <cc:permits
            rdf:resource="http://creativecommons.org/ns#Distribution"
        />
        <cc:permits
            rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
        />
      </cc:License
      >
    </rdf:RDF
    >
  </metadata
  >
</svg
>

Expected Behavior

Svg load with successfully

Actual Behavior

Error Message & Stack Trace

Cannot read properties of undefined (reading 'cloneNode')

[gloriousjob]

If the ding id doesn't exist, why should this load successfully? It sounds like the svg is incomplete.

[ShaMan123]

Vue has been reported to cause problems
Please reproduce without it
Also look at #7012

[siaikin]

not about Vue. just use js have same issue.

https://codesandbox.io/s/quirky-https-nftvh4?file=/src/main.js

[asturur]

it isn't loading correctly in 5.x either.
So not a regression.
I m not sure which should be the expected behaviour.
What the browser do with this SVG? can it render it?

[natuan62]

Hi @asturur the browser can't render it

I think this error cause by this line

In my svg, xlink:href="#ding" access to ding id not exist so elementById(doc, xlink) is undefined

let el2 = elementById(doc, xlink)!.cloneNode(true) as Element;

Fabric5 and fabric6 still has this error

In fabric 5, i check like that and see this passed error

Hi @ShaMan123

You can try with link without use vue https://codesandbox.io/s/quirky-https-nftvh4?file=/src/main.js of @siaikin

[ShaMan123]

repro without vue and without dead files, we don't want to dig into your repro for 20 mins to understand a bug
https://codesandbox.io/p/sandbox/fabric-vanillajs-sandbox-forked-w7k6mn?file=%2Fsrc%2Findex.ts%3A211%2C25

[ShaMan123]

Clone fabric locally and run

npm start vanilla

Paste the reproduction in the app and trace the bug.
Log data, give more context.
What id is it?
And finally PR a fix.
That is what I or @asturur would do

[gloriousjob]

For the sandbox, I had to add the following inside the sandbox loadSvgFromString function to prove the SVG would add to the canvas:

  const svgGroup = new fabric.Group(value.objects.filter(o => o !== null) as fabric.FabricObject[], { ...value.options, left: 0, top: 0 });
  svgGroup.set({left: 0, top: 0});
  canvas.add(svgGroup);

@ShaMan123 Also, side note, in order to use npm start vanilla, I had to navigate into .codesandbox\templates\vanilla and run 'npm -i --include=dev' first, otherwise it complained about open-cli not being installed. I'm not sure why this is since I basically found this inside the code to start but whatever.

[ShaMan123]

@ShaMan123 Also, side note, in order to use npm start vanilla, I had to navigate into .codesandbox\templates\vanilla and run 'npm -i --include=dev' first, otherwise it complained about open-cli not being installed. I'm not sure why this is since I basically found this inside the code to start but whatever.

Did you run the cmd locally? If so it is because your user .npmrc is configured to have NODE_ENV=production
Change it to development