My buttons don't work in production, please help! (Gatsby, TypeScript)

[Lloydinator]

Description and steps to reproduce

The stack for my project is GatsbyJS, TypeScript, Twin Macro (TailwindCSS), and Emotion.

In my styles.tsx file, I style and define my navbar button like this:

import React, {FC, MouseEvent} from 'react'
import tw, {styled} from 'twin.macro'

export type ButtonComponentProps = {
    children?: any,
    onClick?: (e?: MouseEvent) => void
} & React.ButtonHTMLAttributes<HTMLButtonElement>

const ThisButton = ({onClick, children, ...rest}: ButtonComponentProps) => 
    <button onClick={onClick} {...rest}>{children}</button>

export const NavButton = tw(ThisButton)`
    text-black cursor-pointer text-xl leading-none px-3 py-1 border border-solid 
    border-transparent rounded bg-transparent block lg:hidden outline-none 
    focus:outline-none
`

Now my markup file, index.tsx looks like this:

import React, {useState} from 'react'
import {faBars} from '@fortawesome/free-solid-svg-icons'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {Nav, InnerNav, InnerMost, DropDown, Logo, NavButton,
    DropMenu, ListItem, InnerItem, ExtraButton
} from './styles'
import {StaticImage} from 'gatsby-plugin-image'


const Navbar = () => {
    const [navbarOpen, setNavbarOpen] = useState(false)

    return (
        <>
            <Nav>
                <InnerNav>
                    <InnerMost>
                        <Logo href="/">
                        <StaticImage 
                            src="../../images/logo.png"
                            alt="Company logo"
                            width={180}
                            placeholder="blurred"
                        />
                        </Logo>
                        <NavButton
                            type="button"
                            onClick={() => setNavbarOpen(!navbarOpen)}
                        >
                            <FontAwesomeIcon icon={faBars} />
                        </NavButton>
                    </InnerMost>
...
}

export default Navbar

Expected result

Buttons should be clickable in production like it is in development. There should be many more event listeners on my buttons in production than just load.

Actual result

My buttons only work in development. I see all the event listeners you'd expect such as click, however, in production, only load is there. I don't know why and it's very hard to debug. I've tried just making the nav button into a div but it still doesn't work. The only time buttons work in my app is when I use them in forms.

Environment

  System:
    OS: Windows 10 10.0.19041
  Binaries:
    Node: 12.18.4 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.9.2 - /c/Users/Lloydert/AppData/Local/Programs/Python/Python39/python
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (89.0.774.68)
  npmPackages:
    gatsby: ^3.0.1 => 3.0.4
    gatsby-plugin-emotion: ^6.0.0 => 6.0.0
    gatsby-plugin-fontawesome-css: ^1.1.0 => 1.1.0
    gatsby-plugin-image: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^3.2.0 => 3.2.0
    gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0
    gatsby-plugin-root-import: ^2.0.6 => 2.0.6
    gatsby-plugin-sharp: ^3.0.1 => 3.0.1
    gatsby-plugin-sitemap: ^3.0.0 => 3.0.0
    gatsby-source-filesystem: ^3.0.0 => 3.0.0
    gatsby-transformer-remark: ^3.0.0 => 3.0.0
    gatsby-transformer-sharp: ^3.0.0 => 3.0.0
  npmGlobalPackages:
    gatsby-cli: 2.12.109

[ben-rogerson]

Hey there

I think you'll find you'll need to extend a styled component rather than one you've made yourself.
Check emotion docs for more info on the specifics.

Could you check if this works?

import React, {FC, MouseEvent} from 'react'
import tw from 'twin.macro'

-const ThisButton = ({onClick, children, ...rest}: ButtonComponentProps) => 
-    <button onClick={onClick} {...rest}>{children}</button>
+const ThisButton = tw.button``

export const NavButton = tw(ThisButton)`
    text-black cursor-pointer text-xl leading-none px-3 py-1 border border-solid 
    border-transparent rounded bg-transparent block lg:hidden outline-none 
    focus:outline-none
`