Добавление кода инициализации Truepu sh в Gatsby

Question

Я использую Gatsby JS. Недавно я создал файл, в который поместил этот код.

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

Но он дает мне эту ошибку

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

Я пробовал несколько вещей, но ничего не работает. Любая помощь будет очень признательна.

Answer 1

Я Дэвид из Truepu sh Техническая поддержка. Не могли бы вы сказать мне, является ли ваш проект «веб-сайтом» или «веб-приложением».

Если вы создаете веб-сайт, тогда попробуйте использовать метод, предоставленный @ehrencrona. . Это Код от @ ehrencrona

Но если это веб-приложение, мы не поддерживаем его на данный момент и не можем помочь вам с его настройкой.

Мы работаем над решением этой проблемы со своей стороны. Мы сообщим вам, когда у нас появится что-то, чем мы сможем помочь вам.

Answer 2

Если вы хотите вставить встроенный JavaScript (второй тег <script>) с помощью React Helmet, вам нужно будет процитировать весь JavaScript следующим образом:

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

Единственное изменение в том, что я обернул все содержимое тега <script> в {` ... `}.

В любом случае, мне было бы удобнее написать следующее:

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

Здесь, вместо того, чтобы рассматривать JavaScript для инициализации как строку, которую вы фактически включаете в свой код компонента.

Чтобы убедиться, что он запускается только после того, как вы заключите его в useEffect(() => {...}, []).

(Обратите внимание, что я отредактировал ваш личный Truepu sh ID и заменил его на ...; вам нужно будет вернуть его)