Exception thrown using LHC-Forms (LFORMS) when local resource is used instead of remote resource

Question

I'm working through the example at https://jsfiddle.net/lforms/rxmdh3jq/28/.

I can run the code locally as is, but if I try to download the resources and run using the local resources I get a javascript exception in ATNDeserializer.prototype.checkUUID.

The full project I'm using as a test that shows the error is checked in here: https://github.com/greshje/lforms-demo/releases/tag/v0.0.0-working-and-not-working

Note: The only line of code that changes between working and not working is this:

<script src="/lforms-examples/lforms-30.0.0/fhir/R4/lformsFHIR.min.js"></script>

The code that works is here: BasicQuestionnaire-working.html

<head>
    <link rel="shortcut icon" type="image/x-icon" href="/lforms-examples/img/nachc-favico.png">
    <link rel="icon" href="/lforms-examples/img/nachc-favico.png">
    <link href="/lforms-examples/lforms-30.0.0/webcomponent/styles.css" media="screen" rel="stylesheet" />
</head>

<body>
    <h1>Basic Questionnaire Example</h1>

    <div id="formContainer"></div>

    <script src="/lforms-examples/lforms-30.0.0/webcomponent/assets/lib/zone.min.js"></script>
    <script src="/lforms-examples/lforms-30.0.0/webcomponent/scripts.js"></script>
    <script src="/lforms-examples/lforms-30.0.0/webcomponent/runtime-es5.js"></script>
    <script src="/lforms-examples/lforms-30.0.0/webcomponent/polyfills-es5.js"></script>
    <script src="/lforms-examples/lforms-30.0.0/webcomponent/main-es5.js"></script> 
    <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/30.0.0/fhir/R4/lformsFHIR.min.js"></script>
    
    <script>
    var formDef = {
              "status": "draft",
              "title": "Demo Form",
              "resourceType": "Questionnaire",
              "item": [
                {
                  "type": "string",
                  "linkId": "X-002",
                  "text": "Eye color"
                }
              ]
            }

            LForms.Util.addFormToPage(formDef, 'formContainer');
    </script>

</body>

Not working code is here: BasicQuestionnaire.html

<head>
    <link rel="shortcut icon" type="image/x-icon" href="/lforms-examples/img/nachc-favico.png">
    <link rel="icon" href="/lforms-examples/img/nachc-favico.png">
    <link href="/lforms-examples/lforms-30.0.0/webcomponent/styles.css" media="screen" rel="stylesheet" />
</head>

<body>
    <h1>Basic Questionnaire Example</h1>

    <div id="formContainer"></div>

    <script src="/lforms-examples/lforms-30.0.0/webcomponent/assets/lib/zone.min.js"></script>
    <script src="/lforms-examples/lforms-30.0.0/webcomponent/scripts.js"></script>
    <script src="/lforms-examples/lforms-30.0.0/webcomponent/runtime-es5.js"></script>
    <script src="/lforms-examples/lforms-30.0.0/webcomponent/polyfills-es5.js"></script>
    <script src="/lforms-examples/lforms-30.0.0/webcomponent/main-es5.js"></script> 
    <script src="/lforms-examples/lforms-30.0.0/fhir/R4/lformsFHIR.min.js"></script>
    
    <script>
    var formDef = {
              "status": "draft",
              "title": "Demo Form",
              "resourceType": "Questionnaire",
              "item": [
                {
                  "type": "string",
                  "linkId": "X-002",
                  "text": "Eye color"
                }
              ]
            }

            LForms.Util.addFormToPage(formDef, 'formContainer');
    </script>

</body>

The error I'm getting is shown below (this exception is thrown):

ATNDeserializer.prototype.checkUUID = function() {
    var uuid = this.readUUID();
    if (SUPPORTED_UUIDS.indexOf(uuid)<0) {
        throw ("Could not deserialize ATN with UUID: " + uuid +
                        " (expected " + SERIALIZED_UUID + " or a legacy UUID).", uuid, SERIALIZED_UUID);
    }
    this.uuid = uuid;
};

score 1 · Answer 1 · answered Jul 25 '22 at 14:59

1

Are you loading the not-working version as a file, or over a local web server? In my testing, I can reproduce this error when loading the HTML page as a file, but if I start a web server locally and load it that way, it loads the same files fine.

The error is coming from the ANTLR parser, which is used by fhirpath.js, which is included in LHC-Forms to handle FHIRPath expressions. I don't know what it is about loading the script files as files that makes ANTLR unhappy, but I suspect it is something to do with additional security restrictions the browser might place on resources loaded as file:// URIs.

answered Jul 25 '22 at 14:59

Paul Lynch

1,297
13
20

Awesome answer!!! I don't have access to the project right now but I'll give it a try and let you know how I make out. Thanks!!! – John Jul 25 '22 at 18:29
That code you're stepping into, ATNDeserializer, and crashing on is ancient Antlr runtime code--pre-version 4.9. But, when I look at lforms-demo-0.0.0-working-and-not-working/package-lock.json in the zip file, the version of Antlr it pulls in is 4.9.3. After 4.9, the Antlr runtime is in ES6 syntax. There may be a kind of version skew. – kaby76 Jul 25 '22 at 19:50

Exception thrown using LHC-Forms (LFORMS) when local resource is used instead of remote resource

1 Answers1