I’m trying to render a Gantt chart on my form however I keep getting an “Internal Error” Upon further inspection in the Inspector, I notice that the Javascript doesn’t understand some of my methods and objects.
Here is the JavaScript code that you can actually Run and see it working in the Playground.
https://jsfiddle.net/#&togetherjs=lmVyHRR7fQ
I am using the same code in the Custom HTML region in Anvil.Works.
Any thoughts?
SS
Looks like I was able to solve my problem by placing all the external references to CSS and Javascript libraries in the Native Libraries section of my App as per https://anvil.works/docs/client/javascript#using-native-javascript-libraries
But does someone know why it doesn’t work with inline loading of external libraries?
If you go look at the outputted html source code of your Anvil App, you should see loads of css classes and quite extensive script tags that isn’t visible in your source. Those are Anvil’s injection points and reveals how it pre-processes. It’s a big security bonus, since a lot of things can be hidden, and pages load much faster.
Hi @singh,
I can explain without you having to dig through any generated HTML! (You should never have to do that to understand how to use Anvil, don’t worry 
)
The short answer is that the Custom HTML for your forms isn’t injected when the app first loads, but only after your __init__ function has run and the Form is displayed on the screen. (Because of this dynamic injection, <script> tags don’t always load in a neat sequence.) This can confuse all sorts of JS libraries, including the one you’re using to display your Gantt chart.
The solution is exactly what you found – put your tags into Native Libraries, and they will be loaded before your app starts up!