Episerver Forms – Cannot set property ‘$workingForm’ of undefined

This took me a little while to figure out and there isn’t any helpful resource online at the time of writing (according to Google anyway) regarding this error so I think this deserves a blog post…

Problem

I am on Episerver.Forms 4.18.0 and I’ve been getting this error on my browser console intermittently. Sometimes it behaves, and at other times, it throws the following error:

2018-10-25_00-17-29

Solution

It turns out, if you had blindly decided to “async” load the Episerver Form script within the FormContainerBlock.cshtml (by default it’s not), you will then get into an intermittent problem like the one above. A further script from Episerver Forms depends on this JS to have already been downloaded when the document is ready.

<script async type="text/javascript" src="@formConfig.CoreController/GetFormInitScript?formGuid=@Model.Form.FormGuid&formLanguage=@FormsExtensions.GetCurrentPageLanguage()"></script>

So I had to revert it back to the below 🙁

http://@formConfig.CoreController/GetFormInitScript?formGuid=@Model.Form.FormGuid&formLanguage=@FormsExtensions.GetCurrentPageLanguage()

This script is now classified as render-blocking and unfortunately, this script gets loaded for every form you have on your page as this contains a querystring of the form’s unique GUID. Most of my web pages have 3 forms (header, footer, main content) so I will now have 3 render-blocking scripts!! Not good….

%d bloggers like this: