Unable to read certain svg file

[nihiluis]

It appears that this plugin is unable to read certain svgs.

svg:

<svg xmlns="http://www.w3.org/2000/svg" style="isolation:isolate" viewBox="0 0 64 64" width="64pt" height="64pt">
  <defs>
    <clipPath id="a">
      <path d="M0 0h64v64H0z"/>
    </clipPath>
  </defs>
  <g clip-path="url(#a)">
    <circle vector-effect="non-scaling-stroke" cx="898.93229167" cy="462.28035579" r="18.71964421" fill="#A4C9FF"/>
    <path d="M922.005 472c.042-.648.063-1.304.063-1.965 0-13.017-8.179-23.585-18.254-23.585-10.074 0-18.253 10.568-18.253 23.585 0 .661.021 1.317.062 1.965h36.382z" fill-rule="evenodd" fill="#FFF" opacity=".5"/>
    <path d="M912.377 472c.041-.648.062-1.304.062-1.965 0-13.017-8.179-23.585-18.253-23.585-10.075 0-18.254 10.568-18.254 23.585 0 .661.021 1.317.063 1.965h36.382z" fill-rule="evenodd" fill="#FFF" opacity=".5"/>
    <ellipse vector-effect="non-scaling-stroke" cx="898.93229167" cy="472" rx="23" ry="5.5" fill="#FFF" opacity=".5"/>
    <path d="M5.906 32c0-14.35 11.65-26 26-26s26 11.65 26 26-11.65 26-26 26-26-11.65-26-26z" fill="#A4C9FF"/>
    <path d="M50.335 13.694c4.684 4.688 7.571 11.162 7.571 18.306 0 4.942-1.382 9.564-3.78 13.5H13.421c-.058-.9-.087-1.811-.087-2.73 0-18.079 11.36-32.757 25.353-32.757 4.201 0 8.165 1.323 11.648 3.681z" fill-rule="evenodd" fill="#FFF" fill-opacity=".5"/>
    <path d="M13.034 14.138C8.614 18.791 5.906 25.082 5.906 32c0 4.942 1.382 9.564 3.78 13.5h40.893c.058-.9.087-1.811.087-2.73 0-18.079-11.36-32.757-25.353-32.757-4.457 0-8.648 1.489-12.279 4.125z" fill-rule="evenodd" fill="#FFF" fill-opacity=".5"/>
    <path d="M56.437 40.618c-1.578 4.498-4.361 8.43-7.973 11.397-4.8.717-10.482 1.124-16.558 1.124-6.076 0-11.758-.407-16.558-1.124-3.612-2.967-6.395-6.899-7.973-11.397 5.843-1.686 14.668-2.757 24.531-2.757s18.688 1.071 24.531 2.757z" fill-rule="evenodd" fill="#FFF" fill-opacity=".5"/>
  </g>
</svg>

error

TypeError: /home/adalbero/code/proyecto/prototype/frontend/landingpage/src/components/Header.tsx: Property value of ObjectProperty expected node to be of a type ["Expression","PatternLike"] but instead got "JSXExpressionContainer"
    at Array.forEach (<anonymous>)
ModuleBuildError: Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):
TypeError: /home/adalbero/code/proyecto/prototype/frontend/landingpage/src/components/Header.tsx: Property value of ObjectProperty expected node to be of a type ["Expression","PatternLike"] but instead got "JSXExpressionContainer"
    at Object.validate (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/types/lib/definitions/utils.js:131:11)
    at validateField (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/types/lib/validators/validate.js:24:9)
    at validate (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/types/lib/validators/validate.js:17:3)
    at builder (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/types/lib/builders/builder.js:38:27)
    at ObjectProperty (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/types/lib/builders/generated/index.js:390:31)
    at /home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/babel-plugin-inline-react-svg/lib/index.js:121:33
    at Array.forEach (<anonymous>)
    at applyPlugin (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/babel-plugin-inline-react-svg/lib/index.js:117:43)
    at PluginPass.ImportDeclaration (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/babel-plugin-inline-react-svg/lib/index.js:183:11)
    at newFn (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/traverse/lib/visitors.js:179:21)
    at NodePath._call (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitMultiple (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/traverse/lib/context.js:79:17)
    at TraversalContext.visit (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/@babel/traverse/lib/context.js:138:19)
    at /home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/webpack/lib/NormalModule.js:316:20
    at /home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /home/adalbero/code/proyecto/prototype/frontend/landingpage/node_modules/babel-loader/lib/index.js:55:103
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

[ljharb]

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]

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]

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]

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]

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]

@scrlkx yep! because it doesn't provide a synchronous API, which means it can't possibly be used with babel. see #34, #35, and svg/svgo#1015.

[scrlkx]

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]

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]

if the svg has the style:enable-background, this may cause this problem...because this attribute has been deprecated.

[hlubek]

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]

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]

If the same version svgo can do it directly, but not via this transform, then that's something we should be able to fix.