search

airbnb / babel-plugin-inline-react-svg

A babel plugin that optimizes and inlines SVGs for your React Components.
MIT License
474 stars 92 forks source link

Build error after upgrading from 1.1.2 to 2.0.1 #105

Closed dahaca closed 1 year ago

dahaca commented 3 years ago

After upgrading I am getting the following error:

Property value of ObjectProperty expected node to be of a type ["Expression","PatternLike"] but instead got "JSXExpressionContainer"

I am using Next.js + TS. When I roll back to 1.1.2 everything works fine, no changes to .svg files made.

ljharb commented 3 years ago

Can you share the contents of the file that causes the error?

dahaca commented 3 years ago

It was happening in all files. In one React component, I tried removing the SVG component and the error referenced another file the next time.

When it comes to the SVG it was used like that:

import Gear from '../../../public/icons/gear.svg'

...

const GearIcon = styled(Gear)`
  width: 2rem;
`

...

<IconContainer onClick={() => setIsOpened(current => !current)}>
  <GearIcon />
</IconContainer>

The SVG does have a style prop and always had - saw it was causing a problem in another issue.

ljharb commented 3 years ago

Can you share the full error message you receive, including line numbers?

kodedninja commented 3 years ago

hey there, same here. doesn't seem to work for any of the components.

Property value of ObjectProperty expected node to be of a type ["Expression","PatternLike"] but instead got "JSXExpressionContainer"
    at Object.validate (/mnt/c/Users/karam/work/marvl/front/node_modules/@babel/core/node_modules/@babel/types/lib/definitions/utils.js:132:11)
    at validateField (/mnt/c/Users/karam/work/marvl/front/node_modules/@babel/core/node_modules/@babel/types/lib/validators/validate.js:24:9)
    at validate (/mnt/c/Users/karam/work/marvl/front/node_modules/@babel/core/node_modules/@babel/types/lib/validators/validate.js:17:3)
    at builder (/mnt/c/Users/karam/work/marvl/front/node_modules/@babel/core/node_modules/@babel/types/lib/builders/builder.js:40:27)
    at Object.objectProperty (/mnt/c/Users/karam/work/marvl/front/node_modules/@babel/core/node_modules/@babel/types/lib/builders/generated/index.js:399:31)
    at /mnt/c/Users/karam/work/marvl/front/node_modules/babel-plugin-inline-react-svg/lib/index.js:135:33
    at Array.forEach (<anonymous>)
    at applyPlugin (/mnt/c/Users/karam/work/marvl/front/node_modules/babel-plugin-inline-react-svg/lib/index.js:131:43)
    at PluginPass.ImportDeclaration (/mnt/c/Users/karam/work/marvl/front/node_modules/babel-plugin-inline-react-svg/lib/index.js:201:11)
    at newFn (/mnt/c/Users/karam/work/marvl/front/node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:175:21)
ljharb commented 3 years ago

hmm, that's coming from https://github.com/airbnb/babel-plugin-inline-react-svg/blob/master/src/index.js#L103.

@kodedninja any idea what code of yours it's breaking on?

kodedninja commented 3 years ago

@ljharb sorry, no idea. i don't do anything special with it though, but here's my config if that helps (it's still in the 1.* format).

plugins: [
  {
    removeAttrs: {
      attrs: '(data-name)',
    },
  },
  {
    prefixIds: true,
  },
  {
    removeViewBox: false,
  },
  {
    removeTitle: false,
  },
]
metreniuk commented 3 years ago

Looks like prefixIds plugin doesn't work with svg's with style property https://github.com/airbnb/babel-plugin-inline-react-svg/issues/76#issuecomment-616313298