Netlify Identity Widget not showing up

Support
1

Hello! I am trying to use netlify identity on my site with the netlify-identity-widget. It is a gatsby site here at https://60c3e392f0b3f63b3f6063f5--boring-pike-11852a.netlify.app/ (that is the most recent preview deploy)

Anyway, everything works fine on local development but on the live site, the Log In button shows up for about half a second and then disappears, any idea what could be causing this?

I am injecting the widget script via react Helmet

// Wrapped around every page via gatsby-browser.js and gatsby-ssr.js

// Libraries
import React from 'react'
import Helmet from 'react-helmet'

// Styled Components
import { GlobalStyle, Wrapper } from './styles'

// Types
import { LayoutType } from './types'

const Layout: LayoutType = ({ children }) => {
  return (
    <>
      <Helmet>
        <script type='text/javascript' src='https://identity.netlify.com/v1/netlify-identity-widget.js'></script>
      </Helmet>
      <GlobalStyle />
      <Wrapper>{children}</Wrapper>
    </>
  )
}

export default Layout

and injecting into my header here

// Libraries
import React from 'react'

// Assets
import Logo from '../../../static/icons/logo.svg'
import Cart from '../../../static/icons/shopping-cart-line-white.svg'

// Components
import SearchBox from '../SearchBox'
import IconWithText from '../IconWithText'
import Button from '../Button'

// Styles
import { Wrapper, TopSectionWrapper, TopSection, NetlifyLogin } from './styles'

// Types
import { HeaderType } from './types'

const Header: HeaderType = () => {
  return (
    <Wrapper>
      <TopSectionWrapper>
        <TopSection>
          <Logo width='200px' height='auto' />
          <SearchBox />
          <IconWithText dark large Icon={Cart} url='#'>
            Cart
          </IconWithText>
          <NetlifyLogin data-netlify-identity-button></NetlifyLogin>
        </TopSection>
      </TopSectionWrapper>
    </Wrapper>
  )
}

export default Header

The NetlifyLogin is just a styled component rendered as a ‘div’

2

For some reason, it’s the react-dom module removing the children of the button using JS:

image
image975×464 37.1 KB

The actual code is in https://60c3e392f0b3f63b3f6063f5--boring-pike-11852a.netlify.app/framework-f953704cc7f0bc5df98c.js, but due to source maps, Chrome is pointing the cause to be /node_modules/react-dom/cjs/react-dom.production.min.js.

3

This is very interesting… Huh, well i ended up downloading the netlify-identity-widget npm package and got that to work instead, so ill just mark your answer as the solution