External libraries not available on initial app load in Production (ReferenceError on first render)

[alex]

Description

We are experiencing an issue in the Production environment where external JavaScript libraries used in a Code Component are not available during the initial application load.

On the first load of the app, the Code Component fails because the external library has not yet been initialized. This results in a ReferenceError and prevents the component from rendering correctly.

However, after navigating within the app (e.g., switching pages), the libraries appear to load correctly and the functionality works as expected.

The issue only occurs in the Production environment. The same setup works correctly in other environments (e.g., development/test/stage).

Console Error

ReferenceError: Highcharts is not defined
    at renderHomeDash (functions?v=42887ba5:1972:5)
    at fnbabe1a78 (functions?v=42887ba5:2081:9)
    at 710.c4cac98a97a9b314af4f.js:1:5337

Observed Behavior

• On the initial load of the app in Production, the Code Component throws a ReferenceError.
• The external library is not recognized or available at that moment.
• The component fails to render and shows an error.
• After navigating within the app, the library becomes available and the component works normally on the pages we have already navigate, still happening for those pages that we haven’t navigate.

Expected Behavior

External libraries should be available when the application first loads, so the Code Component can render correctly without requiring user navigation.

Environment Details

• Issue occurs only in Production
• Same configuration and setup are used across all environments
• The issue persists even after redeploying to Production
• No configuration differences between environments have been identified

Additional Context

The component relies on external JavaScript libraries (e.g., Highcharts) that are normally available globally. In Production, these libraries appear to not be initialized in time for the first render, but they become available later during the session.

[Theo]

We experienced something similar yesterday, and it turned out that the cdn link to the external library was being redirected in prod only, which resulted in a CORS deny from Appfarm.

Not necessarily the same error for you, but if you see in the console (wherever you initialize that library) that you are getting a CORS error, try adding the link that the console claim is being blocked to your script/style source in the environment config

[Malin]

Hi!

Thanks for the detailed report.

To understand what’s happening here, could you share how Highcharts is being loaded in your app?

• Are you including it via a script tag on the Coded Component?

• Or via a Header Tag in Environment Settings?

If possible, please also share a small snippet of how you’re initializing Highcharts in the Coded Component. That will help us reproduce and investigate the issue.

Malin

[alex]

We don’t include it via script tag on the Coded Component, we are defining it in Environment Settings via Header Tag.

When using Highcharts in the Coded Components, we do this for example:

Highcharts.chart('home-dash-main', {

But is has been working all the time, and is only failing on first load for production environment.

[Malin]

Thanks for the clarification!

Since you’re loading Highcharts through Environment Settings → Header Tags, could you please share a screenshot of ypur setup?

It would also be helpful to know:

• The full script URL you’re loading Highcharts from

• Whether the issue happens in all browsers, or only specific ones (e.g. Safari or Chrome)

From the behavior you describe (failing only on first load in production), it could be related to how the external script is loaded or cached, so seeing the exact setup will help us narrow it down.

[alex]

Thanks — please see the screenshot of our current Header Tag setup attached.

Details:

• Script URL: https://code.highcharts.com/highcharts.js
• Tag type: Script URL
• Async: disabled
• Defer: disabled

This issue happens in all browsers we tested (Arc, Google Chrome).

Also worth noting:

• This setup worked previously
• The issue is only happening in Production
• The problem is not limited to Highcharts; we are also experiencing issues with other third-party libraries
• The libraries appear to become available after navigation / later in the session, but are not reliably available on the first load

That makes us think this may be a broader issue with external library loading or initialization timing in Production, rather than a browser-specific issue or a single-library configuration issue.

[Jonas]

Hello!

The issue is now happening in all environments. This is a critical issue for us and all customers now, and we have no idea how to debug it.

I even tried rolling back to a week-old version of stage (when this defenitely worked), but the issue remains. Also here, the highchart loads after clocking around a bit.

Not sure if this is related, but we suddenly also lost connection to our Intercom integration in stage and prod (chat in app, also added through a coded component). We have not touched either of these implementations lately, so we are concerned that this is a change in web requests or external libraries on the Appfarm side that affects several third-party tools.

[Malin]

When we go to the link you refer to here, we receive a 403 from Highcharts. This indicates that the error is on the Highcharts side and not Appfarm’s. See the attached screenshot.

HighChart - Getting 403 Access to the resource is prohibited

[Jonas]

Yes, you were correct. Sorry about the disturbance.

Seems like we have been flagged for using Highcharts unlicensed, which made it crash from certain IPs. That also made Intercom fail (since the Intercom coded component had a reference to Highchart)

Sorry about the false alert.

[Malin]

No worries! Glad you found the root cause.

Malin