Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Exception seen when using local file instead of remote file for fhir/R4/lformsFHIR.min.js #97

Closed
greshje opened this issue Jul 23, 2022 · 7 comments
Closed

Exception seen when using local file instead of remote file for fhir/R4/lformsFHIR.min.js #97

greshje opened this issue Jul 23, 2022 · 7 comments

Comments

@greshje
Copy link

greshje commented Jul 23, 2022

Hi,

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


<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>


</html>

Not working code is here:
BasicQuestionnaire.html


<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>


</html>

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;
};

image
@plynchnlm
Copy link
Member

Sorry for the late reply. Somehow I missed this. I have seen this problem when the website is served over are file: URL. If you start a web-server (even http), the file should load without the error.

@saulmestanza
Copy link

i have it on a web-server (apache) locally and its giving me the same error.
<script src="./lformsFHIRAll.min.js" defer="true"></script>
im declaring it like this, but the file is on a local web-server

@plynchnlm
Copy link
Member

Are you accessing the website via http(s), or via file://?

@plynchnlm
Copy link
Member

Also, can you send a small HTML file that can demonstrate the problem?

@plynchnlm
Copy link
Member

Note that one of our test pages, https://github.com/LHNCBC/lforms/blob/master/test/pages/build_test_fhirpath.html, also loads the files locally, and it works when accessed via http.

@saulmestanza
Copy link

This is a part of the html, all the files are on the local server, im using apache accessing with localhost.
and everytime i got this error
lformsFHIRAll.min.js:2 Uncaught 59627784-3BE5-417A-B9EB-8131A7286089
but when for example i use an lformsFHIRAll.min.js that is from a website, it works correctly

<html>

<head>
  <title>General Questionnaire</title>
  <base href="./">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
</head>

<body>
  <div id="lforms-form">
    <div id="questionnaireFormContainer"></div>
  </div>
  <script>
    window.onload = function () {
      LForms.Util.setFHIRContext();
      var editMode = false;
      dataEntryPoints = undefined;
      rulesEngineResponse = undefined;
      loadGeneralQuestionnaire();
    };
  </script>

.....

  </script>
  <!-- Importing assets that contains the json Data for initial questionnaires -->
  <script src="./generalQuestionnaire.js"></script>
  <script src="./questionnaireReadonly.js"></script>
  <!-- ES2017 files of the LHC-Forms web component -->
  <link href="./styles.css" media="screen" rel="stylesheet">
  <link href="./style/questionnaire-style.css" media="screen" rel="stylesheet" />
  <script src="./zone.min.js"></script>
  <script src="./main.js"></script>
  <script src="./lhc-forms.js"></script>
  <script src="./lformsFHIRAll.min.js">
</script>
</body>

</html>

@plynchnlm
Copy link
Member

A team member looked into this in detail, and found that the issue is character encoding setting. The file lformsFHIRAll.min.js must be read as utf-8. You can fix this by putting in the head section of the document, or by configuring your server to return a header that says, Content-Type: application/javascript; charset=UTF-8".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@plynchnlm @saulmestanza @greshje