Adding Truepush initalization code to Gatsby - reactjs

Question

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: "..."
},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.

Answer 1

If you want to insert inline JavaScript (the second <script> tag) with React Helmet, you'd need to quote the entire JavaScript as follows:
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: "..."
},function(error){
if(error) console.error(error);
})
})
`}
</script>
</Helmet>
)
}
export default CustomScript
The only change is that I wrapped the entire content of the <script> tag in {` ... `}.
In any case, I'd find it cleaner to write the following:
import React from 'react'
import { Helmet } from 'react-helmet'
import { useEffect } from 'react'
const CustomScript = () => {
useEffect(() => {
var truepush = window.truepush || []
truepush.push(function () {
truepush.Init(
{
id: '...',
},
function (error) {
if (error) console.error(error)
}
)
})
}, [])
return (
<Helmet>
<script
type="application/javascript"
src="https://sdki.truepush.com/sdk/v2.0.2/app.js"
async
></script>
</Helmet>
)
}
export default CustomScript
Here, instead of treating the JavaScript for the initialization as a string you're actually including it in your component code.
To make sure it runs only once you wrap it with useEffect(() => {...}, []).
(Note that I edited out your private Truepush ID and replaced it with ...; you'll need to put it back in)

Answer 2

I am David from Truepush Tech support. Can you please tell me if the project that you are doing is "a WebSite" or "a WebApp".
As if you are building a website then the code please try using the method that #ehrencrona has given out. That is Code by #ehrencrona
But if it is a webapp, we are not supporting them as of now and can't help you with setting it up for them.
We are working on a solution for this from our end as well. We will let you know when we have something that we can give out to help you.