Hidden / Visible error global is not defined

[Borcioo]

Hi, when i try to use Hidden / Visible gatsby just go crazy with error like

Uncaught ReferenceError: global is not defined pn react-awesome-styled-grid.js:1 hn react-awesome-styled-grid.js:1 React 17 <anonymous> app.js:168

The above error occurred in the <Visible> component:

hn@webpack-internal:///./node_modules/react-awesome-styled-grid/lib/react-awesome-styled-grid.js:1:12565
Je/t<@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:25346
div
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19237
div
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19237
div
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19237
webpack_exports.default<@webpack-internal:///./src/styles/headersStyles.js:23:19
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19237
HeroHeader
Index@webpack-internal:///./src/pages/index.js:28:51
div
TransitionRenderer@webpack-internal:///./node_modules/gatsby-plugin-transition-link/components/TransitionRenderer.js:33:35
Transition@webpack-internal:///./node_modules/react-transition-group/Transition.js:133:30
DelayedTransitionWrapper@webpack-internal:///./node_modules/gatsby-plugin-transition-link/components/delayTransitionRender.js:32:32
TransitionGroup@webpack-internal:///./node_modules/react-transition-group/TransitionGroup.js:60:30
div
Location@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:18
TransitionHandler@webpack-internal:///./node_modules/gatsby-plugin-transition-link/components/TransitionHandler.js:45:29
main
Ge@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:16810
Layout@webpack-internal:///./src/components/layout.js:57:18
LayoutComponent@webpack-internal:///./node_modules/gatsby-plugin-transition-link/components/Layout.js:44:18
PageRenderer@webpack-internal:///./.cache/page-renderer.js:23:29
PageQueryStore@webpack-internal:///./.cache/query-result-store.js:39:30
RouteHandler
div
FocusHandlerImpl@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:359:20
FocusHandler@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:330:13
RouterImpl@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:235:20
Location@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:18
Router
ScrollHandler@webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:34:35
RouteUpdates@webpack-internal:///./.cache/navigation.js:304:32
EnsureResources@webpack-internal:///./.cache/ensure-resources.js:22:30
LocationHandler@webpack-internal:///./.cache/root.js:67:29
LocationProvider@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:84:20
Location@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:18
Root
ee@webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-c5d45e0e.js:808:11
InternalProvider@webpack-internal:///./node_modules/gatsby-plugin-transition-link/context/InternalProvider.js:33:30
StaticQueryStore@webpack-internal:///./.cache/query-result-store.js:127:32
ErrorBoundary@webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35
DevOverlay@webpack-internal:///./.cache/fast-refresh-overlay/index.js:97:18
RootWrappedWithOverlayAndProvider

[Borcioo]

import { Col, Visible } from "react-awesome-styled-grid"

<HeaderNav className="loading-page">
  <Col align="flex-start">
    <LogoSvg />
    <Visible xs sm>
      <div>test</div>
    </Visible>
  </Col>
</HeaderNav>