Parcel: 🐛 Inline SVGs with <use> are replaced by undefined

Created on 13 Mar 2018 · 13Comments · Source: parcel-bundler/parcel

Choose one: is this a 🐛 bug report or 🙋 feature request?

🐛Bug

If an inline SVG (in HTML) contains the use tag, the whole SVG will be replaced by the string undefined

🎛 Configuration (.babelrc, package.json, cli command)

No config

❯ echo '<!DOCTYPE html><svg><use xlink:href="./file.svg"></svg>' > index.html

❯ parcel build index.html
✨  Built in 992ms.

dist/index.html    25 B    938ms

❯ cat dist/index.html
<!DOCTYPE html>undefined

🤔 Expected Behavior

Output should be unchanged

😯 Current Behavior

Output is:

<!DOCTYPE html>undefined

Strange thing is that parcel doesn't check for the file at all during parcel build but will fail during parcel watch:

🚨  ..../index.html: Cannot resolve dependency './file.svg' at    at Resolver.resolve (/usr/local/lib/node_modules/parcel-bundler/src/Resolver.js:73:17)

🔦 Context

This: https://css-tricks.com/svg-use-external-source/

💻 Code Sample

<!DOCTYPE html><svg><use xlink:href="./file.svg"></svg>

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.6.2
| Node | 5.6.0
| npm/Yarn | 5.7.1
| Operating System | macOS 10.13.3

Bug SVG

Source

fregante

Most helpful comment

SVGO doesn't handle xlink:href attributes:
> node_modules/.bin/svgo -s '<svg><use xlink:href="./file.svg" /></svg>'
Error in parsing SVG: Unbound namespace prefix: "xlink"
So there is nothing I can fix in htmlnano, unfortunately. Though, I'd suggest replacing xlink:href, which is deprecated, with href.

Thanks, it works.

hehe1111 on 20 Oct 2018

🚀1 👍1

All 13 comments

_{Sent with GitHawk}

DeMoorJasper on 13 Mar 2018

It doesn't look like it; that one drops href, this bug replaces the whole <svg> with undefined, regardless of other content

fregante on 13 Mar 2018

Could u open up an issue in the htmlnano repo? As I don’t think this is a parcel bug

_{Sent with GitHawk}

DeMoorJasper on 13 Mar 2018

Indeed, as long as it's also tracked here

Edit: I appended it to https://github.com/posthtml/htmlnano/issues/47#issuecomment-372699634 since a solution for that should also keep in mind this other bug.

fregante on 13 Mar 2018

👍1

SVGO doesn't handle xlink:href attributes:

> node_modules/.bin/svgo -s '<svg><use xlink:href="./file.svg" /></svg>'
Error in parsing SVG: Unbound namespace prefix: "xlink"

So there is nothing I can fix in htmlnano, unfortunately. Though, I'd suggest replacing xlink:href, which is deprecated, with href.

maltsev on 13 Mar 2018

👍1

Probably that error is due to the lack of the xlink namespace definition. I probably can’t use href without the namespace with the same browser compatibility. I’ll try.

fregante on 13 Mar 2018

Probably that error is due to the lack of the xlink namespace definition

That was indeed the case:

❯ svgo --version
1.0.3

❯ svgo -s '<svg><use xlink:href="./file.svg" /></svg>'
Error in parsing SVG: Unbound namespace prefix: "xlink"
Line: 0
Column: 36
Char: >

❯ svgo -s '<svg xmlns:xlink="http://www.w3.org/1999/xlink"><use xlink:href="./file.svg" /></svg>'
<svg xmlns:xlink="http://www.w3.org/1999/xlink"><use xlink:href="./file.svg"/></svg>

fregante on 15 Mar 2018

This still seems to be a bug in parcel@master, even if htmlnano 0.1.7 fixed the output to error

Setup

❯ npm i parcel-bundler/parcel

❯ npm ls parcel-bundler htmlnano svgo
/
└─┬ [email protected]  (github:parcel-bundler/parcel#c469751e145a426fee2f1de27ccb2a747c7f5d1e)
  ├─┬ [email protected]
  │ └─┬ [email protected]
  │   └── [email protected] 
  └─┬ [email protected] 
    └── [email protected]  extraneous


❯ echo '<!DOCTYPE html><svg><use xlink:href="./file.svg"></svg>' > index.html

Parcel output

❯ ./node_modules/.bin/parcel build index.html
✨  Built in 68ms.

dist/index.html    25 B    4ms

❯ cat dist/index.html
<!DOCTYPE html>undefined

htmlnano and svgo output

❯ node -e 'require("htmlnano").process(require("fs").readFileSync("index.html")).then(result => console.log(result.html));'
(node:45780) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): Error in parsing SVG: Unbound namespace prefix: "xlink"
Line: 0
Column: 34
Char: >
(node:45780) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

❯ ./node_modules/.bin/svgo index.html -o -
Error in parsing SVG: Unbound namespace prefix: "xlink"
Line: 0
Column: 49
Char: >

fregante on 15 Mar 2018

👍1

Neat. --no-cache shows the error. Without it it's undefined

❯ npm i parcel-bundler

❯ ./node_modules/.bin/parcel --version
1.6.2

❯ ./node_modules/.bin/parcel build index.html
✨  Built in 58ms.

dist/index.html    180 B    3ms

❯ ./node_modules/.bin/parcel build index.html --no-cache
🚨  Error in parsing SVG: Unbound namespace prefix: "xlink"
Line: 0
Column: 79

fregante on 18 Mar 2018

@bfred-it cache only keeps in mind the version of parcel, not the dependencies so it makes sense. Can we close this issue?

DeMoorJasper on 18 Mar 2018

If using the cache causes the bug I don't think the issue can be closed.

Can you try on your machine? These are the 5 commands to run

echo '<!DOCTYPE html><svg><use xlink:href="./file.svg"></svg>' > index.html
npm i parcel-bundler
./node_modules/.bin/parcel --version
./node_modules/.bin/parcel build index.html
./node_modules/.bin/parcel build index.html --no-cache

fregante on 18 Mar 2018

Ok I deleted .cache and now it fails even without --no-cache 👌

I found another SVG bug related to parcel build though, I'll open a new issue.

fregante on 18 Mar 2018

SVGO doesn't handle xlink:href attributes:
> node_modules/.bin/svgo -s '<svg><use xlink:href="./file.svg" /></svg>'
Error in parsing SVG: Unbound namespace prefix: "xlink"
So there is nothing I can fix in htmlnano, unfortunately. Though, I'd suggest replacing xlink:href, which is deprecated, with href.

Thanks, it works.

hehe1111 on 20 Oct 2018

🚀1 👍1

Was this page helpful?

0 / 5 - 0 ratings