javascript - 导航栏按钮在 Gatsby 和 TypeScript 的生产环境中不起作用

Question

我的项目的堆栈是 GatsbyJS、TypeScript、Twin Macro (TailwindCSS) 和 Emotion。

在我的styles.tsx文件中，我设计并定义了我的导航栏按钮，如下所示：

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


export type ButtonComponentProps = {
    children?: any,
    onClick?: (e?: React.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
`

现在我的标记文件index.tsx看起来像这样：

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

奇怪的是它在开发模式下表现出色。但是当我运行gatsby build或部署它时，它不起作用。现在，如果您认为问题出在 FontAwesome，则不是。我更换了它，再次运行构建，它仍然无法正常工作。我查看了我的浏览器开发工具，一切看起来都很好，直到我看到了事件监听器部分。在开发中，你能想到的所有事件监听器，例如click, close, load,mouseover等都在那里。但是，在生产中，只有load存在。

谁能帮帮我，拜托！

标签： javascriptreactjstypescriptgatsbyemotion