ljharb
commented
4 years ago Seems like you're using next.js; I'm not sure if that works with this transform or not - or are you saying it works with other SVGs, just not this one?
Closed nihiluis closed 3 years ago
ljharb
commented
4 years ago Seems like you're using next.js; I'm not sure if that works with this transform or not - or are you saying it works with other SVGs, just not this one?
nihiluis
commented
4 years ago Yes, I use next.js. It works with other svgs, just not this one fo some reason. I've put it through svgo and that stripped the svg a bit. The error message is rather cryptic for me, especially in this context.
ljharb
commented
4 years ago The implication is that there's something in the svg that svgo's parser isn't recognizing as an svg tag; perhaps the <defs>?
nihiluis
commented
4 years ago I think it's related to this style="isolation:isolate". I'm not 100% sure. When adding it back and saving + reloading the error doesn't reappear. Some caching mechanic possibly.
yyyyaaa
commented
4 years ago it seems like any svg files that have style attribute will suffer from this bug. I replaced the svg with style with a different svg and it worked
ljharb
commented
3 years ago @scrlkx yep! because it doesn't provide a synchronous API, which means it can't possibly be used with babel. see #34, #35, and https://github.com/svg/svgo/issues/1015.
scrlkx
commented
3 years ago Thanks for the answer @ljharb and sorry for didn't find it myself.
I deleted my question because I was not sure if it made sense, but I will quote it here to give us context again.
I have been using Next.js and even today some svgs cannot be rendered without me understanding why. I wonder if that could be related to the outdated svgo because I suffered with #65 and looks like the latest svgo has already fixed it. The are some specific reason to not upgrade it?
kushwahashiv
commented
3 years ago i'm also getting similar error
ERROR in ./src/pages/Store/Product/ImageDetail/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: experiments/react/front/src/pages/Store/Product/ImageDetail/index.js: Property value of ObjectProperty expected node to be of a type ["Expression","PatternLike"] but instead got "JSXExpressionContainer"
at Object.validate (/experiments/react/front/node_modules/@babel/types/lib/definitions/utils.js:132:11)
at validateField (/experiments/react/front/node_modules/@babel/types/lib/validators/validate.js:24:9)
at validate (/experiments/react/front/node_modules/@babel/types/lib/validators/validate.js:17:3)
at builder (/experiments/react/front/node_modules/@babel/types/lib/builders/builder.js:40:27)
at Object.objectProperty (/experiments/react/front/node_modules/@babel/types/lib/builders/generated/index.js:399:31)
at /experiments/react/front/node_modules/babel-plugin-inline-react-svg/lib/index.js:135:33
at Array.forEach (<anonymous>)
at applyPlugin (/experiments/react/front/node_modules/babel-plugin-inline-react-svg/lib/index.js:131:43)
at PluginPass.ImportDeclaration (/experiments/react/front/node_modules/babel-plugin-inline-react-svg/lib/index.js:201:11)
at newFn (/experiments/react/front/node_modules/@babel/traverse/lib/visitors.js:175:21)
@ ./src/pages/Store/Product/index.js 151:42-66
@ ./src/routes/index.js
@ ./src/client.js
@ multi @babel/polyfill ./tools/lib/webpackHotDevClient ./src/client.js
file ImageDetail/index.js
import Zoom from './svg/zoom.svg';
import './ImageDetail.scss';
const ImageDetail = () => (
<p styleName="container">
<span styleName="zoom">
<Zoom />
</span>
Touch and drag
</p>
);
export default ImageDetail;
Not sure if related to svg
rafid0007
commented
3 years ago if the svg has the style:enable-background, this may cause this problem...because this attribute has been deprecated.
hlubek
commented
3 years ago I experience this error exactly when the <svg> element has a style attribute with anything in it. Moving the style attribute down (e.g. to a <g> element) and clearing the transform cache fixes the issue.
florianmartens
commented
3 years ago Not sure why this was closed. It there any fix availible that works for people? I'm experiencing the same. Unable to render the svg when a style attribute is present.
In theory, the convertStyleToAttrs plugin of svgo should be able to get rid of the style tag. However, when specifying it in my plugin options nothing changes about this error.
My current workaround involves running svgo manually on .svg files to make them compatible.
ljharb
commented
3 years ago If the same version svgo can do it directly, but not via this transform, then that's something we should be able to fix.
oribenez
commented
2 years ago it seems like any svg files that have
styleattribute will suffer from this bug. I replaced the svg withstylewith a different svg and it worked
amazing works like charm🤩
It appears that this plugin is unable to read certain svgs.
svg:
error