External JS widget not working in production (Netlify with Gatsby)

[mrkaluzny]

Netlify site: shihair.netlify.app

I’m trying to add a custom widget from external source. I tried this with Tawk.to as well with same result.

The issue is:

• While development and testing the plugin works correctly
• Once build and deployed on netlify the plugin is throwing errors in the console and not rendering or not rendering completely

I need help with that issue quite urgently.

Working screenshot (local production build):

Netlify deployed version

The code for the implementation (although it shouldn’t matter)

const addScript = (url, callback) => {
  const script = document.createElement('script')
  script.defer = true
  if (url) {
    script.src = url
  }

  if (callback) {
    script.onload = function() {
      callback()
    }
  }

  document.body.appendChild(script)
}

export const onClientEntry = () => {
  window.onload = () => {
    addScript(
      'https://booking-widget.phorestcdn.com/obwidget.bundle.js',
      initBooking,
    )
  }
}

// Site specific
function initBooking() {
  window.widget = new OBWidget('shihairdressing') // eslint-disable-line
}

Is this some sort of netlify setting that I’m not aware of?

[hrishikesh]

Have you tried a production build locally to see if it’s any different? It happens many times that the development build works but the production build throws errors.

[mrkaluzny]

I’m dumb. Brave browser prevented the script from loading, it’s working in all other browsers. So, case closed.

For anyone with similar problems - the script in the first post goes into gatsby-browser.js. Loading this script any other way failed before I thought today was another of this type of the problem. So check your browser blocking settings before looking for more robust solutions