React with SMART on FHIR JS Client with NPM

Vimig Socrates

unread,

Jul 11, 2017, 3:05:48 PM7/11/17

to SMART on FHIR

I'm trying to build a React app using the SMART on FHIR JS client and we're currently using the create-react-app starter kit (https://github.com/facebookincubator/create-react-app) and trying to import fhir-client.js (https://github.com/smart-on-fhir/client-js) as a node module through npm.

I've installed it directly from Github, but have run into a couple problems.

I keep getting an empty return from the "module.exports" return of the import statement, whereas I believe I should be getting a default function of some kind.

Some theories:

The package.json file in the root directory of the Github repo doesn't have a "main" field, so there is no entry point is.
The import statement is formatted incorrectly, I have currently tried:

import fhir from 'fhir-js-client;
var test = require('fhir-js-client') //among other variations

For completeness, I've included my package.json file as well:

{
  "name": "sample-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "fhir-js-client": "git+https://github.com/smart-on-fhir/client-js.git",
    "fhir.js": "0.0.20",
    "querystring-es3": "^0.2.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.10"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

If you point me in the right direction with regards to some of these things, that would be great! Please let me know if you need more information!

Thanks for taking the time!

Vimig Socrates

Vladimir Ignatov

unread,

Jul 11, 2017, 3:22:44 PM7/11/17

to Vimig Socrates, SMART on FHIR

Even though the fhir-client library does exist in NPM, that is only for convenience. It is client-side only library meaning that you cannot import or require it.

Once you have it downloaded in your node_modules, you can include it in the HTML page using regular script tag.

Vlad

--
You received this message because you are subscribed to the Google Groups "SMART on FHIR" group.
To unsubscribe from this group and stop receiving emails from it, send an email to smart-on-fhi...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Vimig Socrates

unread,

Jul 11, 2017, 3:45:35 PM7/11/17

to SMART on FHIR, vimigs...@gmail.com

When I include the client-side library, I end up with

<head>
    ...
    <script src="fhir-client.js"></script>
    ...
  </head>

but when I try and access the "FHIR" object in a <script></script> tag, I get the error:

Uncaught ReferenceError: FHIR is not defined

Is there something else I have to do in addition to placing the client library in a folder? Thanks!

Vladimir Ignatov

unread,

Jul 11, 2017, 3:54:31 PM7/11/17

to Vimig Socrates, SMART on FHIR

You need to figure out the exact path. For example, it might be something like:

<script src="node_modules/fhirclient/fhir-client.js"></script>

Or you can copy the file "node_modules/fhirclient/fhir-client.js" to wherever your JS assets are and include it as any other JS file.

Vlad

Vimig Socrates

unread,

Jul 12, 2017, 10:52:57 AM7/12/17

to SMART on FHIR, vimigs...@gmail.com

Yup, thank you! Was just referring to it from the wrong location.

Message has been deleted

nikhil

unread,

Feb 14, 2019, 9:15:04 PM2/14/19

to SMART on FHIR

I'm still getting "fhir is not defined" when I try to access from app.js, which is rendered from index.js.

I'm loading the fhir-client.js file via the script tag in index.html, and I've verified that the file path is correct.

Is there some declaration of the fhir object that I'm missing in my React files? They seem to not be aware of the loaded fhir-client.js.

If anyone can shed light, please do. Thanks!

Vladimir Ignatov

unread,

Feb 14, 2019, 9:23:53 PM2/14/19

to smart-...@googlegroups.com, nikhil

Typically, you should install "fhirclient" from NPM. That will give you
different structure than the one from GitHub. For the GitHub version you
should be looking at the "node_modules/fhirclient/dist" folder.

Vlad

nikhil

unread,

Feb 17, 2019, 5:09:59 PM2/17/19

to SMART on FHIR

How do I begin using fhirclient?

I'm initializing the client as per the docs at http://docs.smarthealthit.org/clients/javascript/:

let client = new fhir.client({
      serviceUrl: 'https://r2.smarthealthit.org',
      auth: {
        type: 'none'
      }
    });

and importing fhir via

import fhir from 'fhirclient';

but I'm getting the following error:

Any guidance is appreciated. Thanks.

Vladimir Ignatov

unread,

Feb 17, 2019, 5:22:10 PM2/17/19

to smart-...@googlegroups.com, nikhil

It is not a module that you can import or require. It is a bundle that you
should include in the page using a script tag. Then you can access
window.FHIR.

Thanks,
Vlad

On Sunday, February 17, 2019 5:09:58 PM EST nikhil wrote:
> How do I begin using fhirclient?
>
> I'm initializing the client as per the docs at
> http://docs.smarthealthit.org/clients/javascript/:
>
> let client = new fhir.client({
> serviceUrl: 'https://r2.smarthealthit.org',
> auth: {
> type: 'none'
> }
> });
>
> and importing fhir via
>
> import fhir from 'fhirclient';
>
>
> but I'm getting the following error:
>
>

Reply all

Reply to author

Forward