Is it possible to use the lforms npm module within a React app? about lforms

[plynchnlm]

I can't think why using it as an npm module would make a difference. We just tried including LForms in a React app we have (by adding the tags to the pre-built versions, not via npm) and both the form and the React app seemed to co-exist happily.

[plynchnlm]

Although it is an npm package, it is intended for the browser, not to be run in Node.js. As with other npm packages like AngularJS or jQuery, you need to package up (and probably transpile) the files to be run in the browser (e.g. with webpack).

In our test in our React app, we just used the browser-ready version (which is built from the same files via webpack) by including the URLs from the website we've hosted those, as documented at http://lhncbc.github.io/lforms/#installation. (There are two URLs, one for the CSS and one for the JavaScript.) Note that the latest version is now 20.1.2. (The documentation says version 17, which was the latest then, but the same documentation applies.)

So, for your React app, unless you are already using webpack to package up other npm modules, I would not bother with the npm package for LForms, but just use the already webpacked, browser-ready version.

LForms does all of its stuff (rendering forms and exporting QuestionnaireResponses) in the browser.

I hope that helps. If I can find a way to make this more clear in the documentation, I will.

[yunwwang]

Do you have an example for React app? I am still confused how to integrate lforms to react component

[MJ422]

Great, thank you for the feedback. I wanted to pursue this use-case but was not sure. Thanks for your prompt reply!

[MJ422]

Hi, just wanted to get some advice and/or guidance on the implementation of this lforms NPM module within a React/Node.js project. I am continually met with errors when attempting to import this file in to a javascript file within a very small React project.

When attempting to install @types/lforms, I am given a 404 so it seems not to exist.
The module was installed in to my node modules folder via "npm install lforms --save" - it is correctly reflected in my package.json

I am also a bit confused by the examples on Runkit. I seem to continually hit a DOM/BOM related issue on the Runkit examples linked on the npm module page (see below):

@plynchnlm
In short, I am just looking for a bit of advice on the best practice for using this lforms npm module within a React application's paradigm. If you could show some examples from the implementation you mentioned that you did, which you mentioned in the comment above, then perhaps I could see where I am mistaken.

Could this be an issue with versioning in Node? I am currently using 10.16

Thank you and I look forward to hearing from you at your earliest convenience!

[plynchnlm]

The error in your IDE indicates it is expecting the module to be TypeScript. It is just regular JavaScript. I don't use TypeScript, so I am not sure what to suggest, but my understanding was that JavaScript could be used with TypeScript code.

I had never seen the RunKit example before. I suspect it is autogenerated. The error you see there is the result of trying to require lforms from within Node. The lforms package works in a browser, and not within Node.js. Are you trying to use it server-side?

[MJ422]

The error in your IDE indicates it is expecting the module to be TypeScript. It is just regular JavaScript. I don't use TypeScript, so I am not sure what to suggest, but my understanding was that JavaScript could be used with TypeScript code.

I had never seen the RunKit example before. I suspect it is autogenerated. The error you see there is the result of trying to require lforms from within Node. The lforms package works in a browser, and not within Node.js. Are you trying to use it server-side?

Yes, we were trying to leverage this npm package in a node environment. Our idea was to have handler functions call for FHIR questionnaire resources on the FHIR server, then use that LForm package's built-in methods to generate LForms data to display in React components. On top of this, also use the built-in methods to generate QuestionnaireResponse resources out of the input in to the LForm in the view.

I can't think why using it as an npm module would make a difference. We just tried including LForms in a React app we have (by adding the tags to the pre-built versions, not via npm) and both the form and the React app seemed to co-exist happily.

@plynchnlm How exactly did you implement this, if I may ask? In your latest response, you mention that the lforms package only works in a browser and not in a local node environment.

I appreciate your continued support, and look forward to hearing from you!

[plynchnlm]

I have not tried integrating LForms in a React component. What we did try was including the pre-built versions using script/link tags (as described at http://lhncbc.github.io/lforms/#installation) in a page with a React app, and both the LForms display and the React app worked, but independently.

[jdelucaa]

I can't think why using it as an npm module would make a difference. We just tried including LForms in a React app we have (by adding the tags to the pre-built versions, not via npm) and both the form and the React app seemed to co-exist happily.

Hi @plynchnlm

We are interested in using this library within our product (a react app), but in order to do so, we'd like to have it as an npm module as we really think it makes a difference because it enables/facilitates the testing. We are more than happy to help make the necessary changes to bundle it as an npm package! :)

Please. let us know what your thoughts are! This is a great library and I think making it more compatible with the other major frontend frameworks would make it even greater!

Thanks.

[plynchnlm]

It is actually already an npm package: https://www.npmjs.com/package/lforms. This issue here is that it is intended to be run in the browser, and needs to be transpiled with webpack to something the browser can understand. If you are using webpack for your React app, it should be possible to pull in the lforms npm package. If you are not using webpack, well, I don't know but I suspect there will be some issues with getting it built. There is currently a mix of require and import statements, which I think cause a problem for some other build systems.

Also, be aware that we are going to release a rewrite in a couple of months, based on Angular, but the npm package will be a web component (which should be usable with React, or at least that was the goal).

[okongwu101]

I can't think why using it as an npm module would make a difference. We just tried including LForms in a React app we have (by adding the tags to the pre-built versions, not via npm) and both the form and the React app seemed to co-exist happily.

Please can you provide a simple example to illustrate your implementation. Thank you.

[plynchnlm]

@lhcye Created this example of a React app using the lforms webcomponent (version 30.3.0): https://codepen.io/lhcye/pen/KKQbbwZ
For some reason the same example does not work in JSFiddle, but I guess that might have to do with how JSFiddle loads JavaScript libraries.

[plynchnlm]

Closing, as the current version of lforms, which is a web component, does not have an npm version. We are hoping to get that working again, probably starting with an Angular component as a npm package. The issue is that when Angular builds the web component, it bundles all of the dependencies, and it does not make sense to publish bundled files as an npm package. Also, even if we did that, "import" statements to pull in the files might not work, depending on which build system you use. Anyway, the built files are available from https://clinicaltables.nlm.nih.gov/lforms-versions and can be downloaded from there, if you don't wish to run the build yourself.

[okongwu101]

Closing, as the current version of lforms, which is a web component, does not have an npm version. We are hoping to get that working again, probably starting with an Angular component as a npm package. The issue is that when Angular builds the web component, it bundles all of the dependencies, and it does not make sense to publish bundled files as an npm package. Also, even if we did that, "import" statements to pull in the files might not work, depending on which build system you use. Anyway, the built files are available from https://clinicaltables.nlm.nih.gov/lforms-versions and can be downloaded from there, if you don't wish to run the build yourself.

I saw your response and i really appreciate the effort. Still trying to get it to work though. Am using Next JS not Angular. I think my issue is at the installation phase. I Followed the guides but it still dosen't work. I keep getting 'LForms...' is undefined when i run 'LForms.Util.addFormToPage(formDefinition, 'myFormContainer', options)'.

[plynchnlm]

How are you installing it?

[plynchnlm]

Also, you did not mention whether you looked at the codepen example I posted above. Did you take a look at that?

[okongwu101]

1: Download the built zip. The latest version.
2: Extract the folder.
3: Save the folder to root directory of my NextJS project
4: Consume / import (whatever the term is) the scripts and css file in my pages using the script tag
5: In the JSX create a location to display the form
6: Run the 'LForms.Util.addForm......' with required arguments to display a form. Then all hell break loose.
7: Error: LForms is undefined.

[okongwu101]

Also, you did not mention whether you looked at the codepen example I posted above. Did you take a look at that?

I mentioned above that i looked at it. I also thanked you. Still trying to get it. Am more familiar with functional components. Pardon my green horns.

[plynchnlm]

We're not familiar with NextJS, though we've heard of it. Perhaps you could share an example showing the problem on CodePen?

[okongwu101]

We're not familiar with NextJS, though we've heard of it. Perhaps you could share an example showing the problem on CodePen?

https://codesandbox.io/s/lhforms-ywh1xx?file=/pages/index.js

[plynchnlm]

Looking at index.js in that example, it would seem that LForms is being used before you are returning the HTML that loads the LForms JS. Those files need to be loaded before LForms is used.

[lhcye]

"LForms" probably needs to be "window.LForms". LForms is added to window when the js files are loaded.

I am not familiar with NextJs. You need to make sure all the LForms js files are loaded before you can use window.LForms.