1

I have a JS file that needs to be imported into my gatsby site. This JS file should give me access to a variable called connect. Below is a simplified (and working) version of the behavior I am trying to achieve in Gatsby. For simplicity/demonstration it uses only a index.html file and a connect-script.js file (but still works). Here, I am able to access the connect variable as expected:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="connect-script.js"/> // provides access to "connect" variable
        <title>Document</title>
    </head>
    <body>
        // some HTML...
        <script>
            console.log(connect) // this IS defined and has expected value from connect-script.js
        </script>
    </body>
    </html>

However, I do not know how to access this connect variable from a Gatsby site and use it in my components. I have tried importing the JS file in several ways including using react-helmet as well as using a gatsby-ssr.js file (both described in this answer), but errors are always thrown after running gatsby develop saying connect is not defined.

My component looks something like this:

import React from 'react'
import { Helmet } from "react-helmet"
import { withPrefix } from 'gatsby'
import Header from './Header'
import Footer from './Footer'

const Layout = ({children}) => {
  console.log(connect) // this is obviously undefined and throws an error.
  return (
    <div>
        <Helmet title='Gatsby'>
          <script src={withPrefix('connect-script.js')}></script>
        </Helmet>
        <Header />
        {children}
        <Footer />
    </div>
  )
}

export default Layout

The JS file is thousands of lines of compiled code, and that is why I am not including code from it. I have tried importing connect-script.js with an import statement at the top of the file, but get thousands of errors. I just know that I can access connect using a basic setup with one simple index.html file and the connect-script.js file, but I can not figure out how to access this variable in Gatsby.

If you need to know more about why this is being done in this way, I am trying to incorporate a widget described in this repo into my gatsby site.

Any help would be tremendously appreciated as I have spent way too many hours trying to figure it out.

bykerbry
  • 97
  • 7

1 Answers1

2

A brilliant developer has helped me with this & I am posting the answer he discovered for any future visitors to this question.

He discovered that I was able to access the connect variable in my component by using window.connect. I found that this works only when using gatsby-ssr.js and NOT when using Helmet.

Using gatsby-ssr.js:

const React = require("react")

exports.onRenderBody = ({setHeadComponents}) => {
    setHeadComponents([
        <script key='1' type="text/javascript" src={"connect-script.js"}/>
    ]);
};

Then in ANY component, I can access the connect variable made available by connect-script.js by using window.connect.

Note: Gatsby uses server side rendering & window is not defined during SSR. An option to resolve this would be to wrap your reference to window in componentDidMound or useEffect, for example.

bykerbry
  • 97
  • 7