Get a peek at our latest innovations at Sanity Product Day on Dec 8th →

React Development - Warning: Failed Prop SanityLogo

9 replies
Last updated: Jul 21, 2021

When using a custom logo for the Sanity studio since the last update I am getting the following error:
`react.development.js:220 Warning: Failed prop type: Invalid prop

SanityLogo
of type
object
supplied to
LoginWrapper
, expected
function
.`
My code:


import React from 'react'
import styled, { css } from 'styled-components'

const Logo = ({ projectName }) => {
   return (
      <Icon isLogin={projectName}>
         <!-- SVG LOGO INLINE -->  
      </Icon>
   )
}

const Icon = styled.div`
   display: block;
   width: auto;
   height: 2em;
   max-width: 100%;
   margin: -0.25em auto;
   color: #fff;

   ${(props) =>
      props.isLogin &&
      css`
         display: block;
         margin: 0 auto;
         height: 4em;
         color: black;
      `}

   svg {
      display: block;
      margin: 0 auto;
      height: 100%;
      width: auto;
      fill: currentColor;
   }
`

export default Logo 

Jul 21, 2021, 11:24 AM

Pretty sure I had the same in the past, I just re-started the Studio.

Jul 21, 2021, 12:31 PM

Restarted multiple times but the error keeps popping up very weird

Jul 21, 2021, 12:32 PM

Does the problem persist if you remove/reinstall

node_modules
?

Jul 21, 2021, 5:16 PM

user M
tried multiple times keep getting same error

Jul 21, 2021, 5:27 PM

Didn’t have it before the Sanity update maybe it just the update which is giving this error

Jul 21, 2021, 5:35 PM

In 2.13.0, there was a migration from the parts system to Sanity UI in LoginWrapper.js. I think that’s the source of the error.

Jul 21, 2021, 5:36 PM

Oke cool

Jul 21, 2021, 5:37 PM

If you go to

node_modules/@sanity/default-login/lib/LoginWrapper.js
and change
SanityLogo: _propTypes.default.func,
to
SanityLogo: _propTypes.default.object,
then restart your studio, you can see if the error disappears even if you leave your custom logo code intact.

Jul 21, 2021, 5:41 PM

If you go to

node_modules/@sanity/default-login/lib/LoginWrapper.js
and change
SanityLogo: _propTypes.default.func,
to
SanityLogo: _propTypes.default.object,
, you can see if the error disappears even if you leave your custom logo code intact.

Jul 21, 2021, 5:41 PM

Sanity.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Free to get started, and pay-as-you-go on all plans. Find out more.