Get Warning: React does not recognize the `maskType` prop on a DOM element error in the console

[positonic]

Expected Behavior

No errors in the console.

Current Behavior

I have this error in the console:

index.js:2177 Warning: React does not recognize the `maskType` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `masktype` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in mask (created by A)
    in svg (created by A)
    in A (at InfoSection.js:99)
    in div (created by Context.Consumer)
    in Styled(div) (created by Context.Consumer)
    in EmotionCssPropInternal (at InfoSection.js:98)
    in div (created by Context.Consumer)
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in EmotionCssPropInternal (at InfoSection.js:94)
    in div (created by Context.Consumer)
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in Main (created by Context.Consumer)
    in EmotionCssPropInternal (at InfoSection.js:40)
    in InfoSection (at pages/index.js:26)
    in IndexContent (at pages/index.js:44)
    in main (at layout.js:184)

Failure Information (for bugs)

Steps to Reproduce

Gatsby app with: import DecoratorAltruistic from '../../images/svg/general/decorators/a.svg' ....

return ( <DecoratorAltruistic /> )

Screenshots

Context

• Jimp Version: 0.14.0
• "requires": { "@babel/runtime": "^7.7.2", "@jimp/custom": "^0.14.0", "@jimp/plugins": "^0.14.0", "@jimp/types": "^0.14.0", "regenerator-runtime": "^0.13.3" }
• Operating System: macos

[positonic]

It appears to used by gatsby-plugin-sharp:

[robmarshall]

@jamespfarrell Did you get anywhere with this? I have come across this issue as well.

[animeshgarai09]

Facing the issue while importing an SVG.

[loekTheDreamer]

I had the exact same issue.

Not sure if it will work out for everyone but just remove the field completely. With my design, it didn't seem to have an effect on the display of the svg at all. Maybe its metadata that react just ignores or doesn't even need.

Inside the svg just remove maskType (or mask-type depending on your use case):

     <mask
       id="mask0"
       // maskType="alpha" // mask-type="alpha"
       maskUnits="userSpaceOnUse"
       x="604"
       y="2"
       width="108"
       height="114"
     >

[brada1703]

Does anyone else have a fix for this? I tried @loekTheDreamer 's idea, but even with removing "mask-type", I still get the same error.

[hipstersmoothie]

This has nothing to do with jimp and is a react error