question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DOMException: Failed to execute 'importNode' on 'Document'

See original GitHub issue

After migrating to v3.0.5 the plugin throws the following error:

browser-symbol.js?59cf:52 Uncaught (in promise) DOMException: Failed to execute 'importNode' on 'Document': The imported node has an invalid namespace.
    at parse (webpack-internal:///./node_modules/svg-baker-runtime/browser-symbol.js:52:21)

It still works fine.

My webpack config:

{
      test: /\.svg$/,
      include: /sprite/,
      loader: 'svg-sprite-loader',
    },

And I use it like this:

import glyph from 'images/svg.svg';
...
  <svg viewBox={glyph.viewBox}>
    <use xlinkHref={`#${glyph.id}`} />
  </svg>
  • Node.js version: 6.9.4
  • webpack version: 3.1.0
  • svg-sprite-loader version: 3.0.5
  • OS type & version: MacOS Sierra 10.12.5

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:13 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
yantakuscommented, Aug 31, 2017

@gazpachu I fixed my issues by removing metadata tags from my SVGs as I described here: https://github.com/kisenka/svg-sprite-loader/issues/154#issuecomment-316008710

So it works well for me since than.

1reaction
yantakuscommented, Jul 18, 2017

I’m sorry, I pasted code of a wrong SVG. This is the one that causes the issue:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 200 199.96001"
   height="199.96001"
   width="200"
   xml:space="preserve"
   id="svg2"
   version="1.1"><metadata
     id="metadata8"><rdf:RDF><cc:Work
         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
     id="defs6" /><g
     transform="matrix(1.3333333,0,0,-1.3333333,0,199.96)"
     id="g10"><g
       transform="scale(0.1)"
       id="g12"><path
         id="path14"
         style="fill:#4eb9e8;fill-opacity:1;fill-rule:nonzero;stroke:none"
         d="M 1500,749.867 C 1500,335.719 1164.22,0 750,0 335.789,0 0,335.719 0,749.867 0,1164 335.789,1499.73 750,1499.73 c 414.22,0 750,-335.73 750,-749.863" /></g></g></svg>

And removing this weird piece of code:

<metadata
     id="metadata8"><rdf:RDF><cc:Work
         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata>

fixes the issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Solving `Failed to execute 'importNode' on 'Document'` in ...
js. Alpine Expression Error: Failed to execute 'importNode' on 'Document': parameter 1 is not of type 'Node'.
Read more >
Failed to execute 'importNode' on 'Document': parameter 1 ...
For a new project I used the template linking code from here: ... Uncaught TypeError: Failed to execute 'importNode' on 'Document': ...
Read more >
Why isn't importNode executing when everything is fine?
When I log the "test" variable to the console, I am getting the document that contains File1 so it's fine there. I just...
Read more >
Document.importNode() - Web APIs | MDN
The Document object's importNode() method creates a copy of a Node or DocumentFragment from another document, to be inserted into the ...
Read more >
Example usage for org.w3c.dom Document importNode
appendChild(document.importNode(details.getFirstChild(), true)); return document; } else { logger.error("Error querying CoNE: Status " + detailMethod.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found