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.

svg use produces "multiple root elements must be wrapped in an enclosing tag" error

See original GitHub issue

It seems strange to me that the following markup produces the multiple root elements must be wrapped in an enclosing tagerror message:

return html`
      <div>
        <svg>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" href="#reply"></use>
        </svg>
      </div>
    `;

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
YerkoPalmacommented, Jun 20, 2017

This is a bel issue not choo specific. and is not actually an issue, it happens to me when I had <path></path> in my svg, it fixed changing it to <path />. So, in your case it should fix with

return html`
      <div>
        <svg>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" href="#reply" />
        </svg>
      </div>
    `;
1reaction
yoshuawuytscommented, Jun 20, 2017

Not on laptop right now so can’t debug - sometimes this error is incorrectly thrown because tags are closed when they shouldn’t be - or a trailing closing tag is added when it isn’t needed. Could you try out a variation of these? Thanks!

On Tue, Jun 20, 2017, 14:49 Martin Folkeseth notifications@github.com wrote:

Sorry, a bit unclear there. This code is getting this error. I don’t see why it does.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/yoshuawuyts/choo/issues/514#issuecomment-309742727, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWlekFL6Rav6v5BA28-7TtK-ouGmD0oks5sF7_sgaJpZM4N_hnQ .

Read more comments on GitHub >

github_iconTop Results From Across the Web

Adjacent JSX elements must be wrapped in an enclosing tag ...
Actually render should return single root element so everything should be wrapped inside one root element. For example:.
Read more >
How to Fix 'JSX element must be wrapped in enclosing tag'
To resolve the error, you either need to wrap root sibling elements into a parent element, or you need to use fragments.
Read more >
Adjacent JSX elements must be wrapped in an enclosing tag
If anyone uses multiple HTML elements inside a render method in the React library, it shows an error specifying that Adjacent JSX elements...
Read more >
Adjacent JSX elements must be wrapped in an enclosing tag
The React.js error "Adjacent JSX elements must be wrapped in an enclosing tag" occurs when a component returns multiple elements. To solve the...
Read more >
JSX and adding CSS To Your App - DEV Community ‍ ‍
The first consideration to make is when we want to return multiple items in the return statement. Nested elements must be wrapped in...
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