مشكلة في إضافة script خارجي في React - Gatsby؟

لما لا تقوم فقط بتحميله تزامنيا ثم تضمينه بالصفحة ؟ 

componentDidMount() {
  // script إنشاء عنصر بوسم 
  const script = document.createElement("script");
  
  // تعريف المسار أو الرابط
  script.src = "/path/to/my_scripts.js";
  
  // تفعيل التزامن و الوصول اليه 
  script.async = true;
  script.onload = () => this.scriptLoaded();
  
  // تضمينه في البودي
  document.body.appendChild(script);
}

يمكنك وضع الكود في ملف خارجي أولا لأن هذا موصى به داءما 

(function(d, s) {
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = 'https://example.com/app.js';
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }
}(document, 'script'));

بعدها يمكنك استخدام react-helmet لحقنه ك script

import {Helmet} from "react-helmet";

const Demo = props => (
<div className="application">
            <Helmet>
              <script src="/path/to/script.js" type="text/javascript" />
            </Helmet>
            ...
        </div>
  
);

او يمكنك استيراده عن تحميل المكون لأول مرة 

import React, { useEffect } from 'react';
import Link from 'gatsby-link';

const Component = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = '/path/to/script.js';
    script.async = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, []);
  return <>...</>;
};

export default Component;