Unable to read certain svg file #76

nihiluis · 2020-04-05T22:45:30Z

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)

The text was updated successfully, but these errors were encountered:

ljharb · 2020-04-06T03:02:43Z

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 · 2020-04-06T08:28:11Z

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 · 2020-04-07T00:22:46Z

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 · 2020-04-07T20:24:40Z

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 · 2020-04-20T05:11:37Z

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

kushwahashiv · 2021-04-10T20:41:13Z

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 · 2021-05-01T11:05:15Z

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

hlubek · 2021-06-04T07:27:54Z

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.

…in-inline-react-svg#76 (comment)

florianmartens · 2021-09-12T19:58:21Z

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 · 2021-09-12T23:37:32Z

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 · 2021-12-23T09:34:25Z

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

amazing works like charm🤩

This comment has been minimized.

Sign in to view

metreniuk mentioned this issue Apr 14, 2021

Build error after upgrading from 1.1.2 to 2.0.1 #105

Closed

nihiluis closed this as completed Aug 5, 2021

raulbarriga added a commit to raulbarriga/jbb-construction-inc that referenced this issue Aug 27, 2021

Fixed an issue with the new svgs. Found the fix at: airbnb/babel-plug…

789cb25

…in-inline-react-svg#76 (comment)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to read certain svg file #76

Unable to read certain svg file #76

nihiluis commented Apr 5, 2020

ljharb commented Apr 6, 2020

nihiluis commented Apr 6, 2020

ljharb commented Apr 7, 2020 •

edited

Loading

nihiluis commented Apr 7, 2020

yyyyaaa commented Apr 20, 2020 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

kushwahashiv commented Apr 10, 2021 •

edited

Loading

rafid0007 commented May 1, 2021

hlubek commented Jun 4, 2021

florianmartens commented Sep 12, 2021 •

edited

Loading

ljharb commented Sep 12, 2021

oribenez commented Dec 23, 2021

Unable to read certain svg file #76

Unable to read certain svg file #76

Comments

nihiluis commented Apr 5, 2020

ljharb commented Apr 6, 2020

nihiluis commented Apr 6, 2020

ljharb commented Apr 7, 2020 • edited Loading

nihiluis commented Apr 7, 2020

yyyyaaa commented Apr 20, 2020 • edited Loading

This comment has been minimized.

This comment has been minimized.

kushwahashiv commented Apr 10, 2021 • edited Loading

rafid0007 commented May 1, 2021

hlubek commented Jun 4, 2021

florianmartens commented Sep 12, 2021 • edited Loading

ljharb commented Sep 12, 2021

oribenez commented Dec 23, 2021

ljharb commented Apr 7, 2020 •

edited

Loading

yyyyaaa commented Apr 20, 2020 •

edited

Loading

kushwahashiv commented Apr 10, 2021 •

edited

Loading

florianmartens commented Sep 12, 2021 •

edited

Loading