Something is not defined in GatsbyJS

1

I am using GatsbyJS. Recently I created a file in which I put this code.

import React from 'react'
import { Helmet } from 'react-helmet'

const CustomScript = () => {
    return (
        <Helmet>
            <script type="application/javascript" src="https://sdki.truepush.com/sdk/v2.0.2/app.js" async></script>
            <script>
            var truepush = window.truepush || [];
                    
            truepush.push(function(){
                truepush.Init({
                    id: "5ec700575558cfe7cca42d1b"
                },function(error){
                    if(error) console.error(error);
                })
            })
            </script>
        </Helmet>
    )
}

export default CustomScript

But it gives me this error

ERROR #98123  WEBPACK

Generating development JavaScript bundle failed


/home/lilynicole/GitLab/portfolio/src/components/CustomScript.js
  12:17  error  'truepush' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)


File: src/components/CustomScript.js

failed Re-building development bundle - 5.401s

I have tried couple of things but nothing seems to work. Any help will be really appreciated.

2

The JS inside your script tag is being evaluated at the time the JSX is built, not as part of the script tag. You usually don’t include script tags in component output except in weird special cases – React just doesn’t work like that. Since this is initialization code, you’d just stick this in the main function that starts your react app, or maybe in a useEffect hook.