Not working in IE about client-js

[vlad-ignatov]

Great! Despite the title, this is not an issue with IE, but with different build systems. So far we have identified how to avoid it in Aurelia and Vue. I will close this now and "expect" it to be re-opened for other build systems.

[vlad-ignatov]

Any chance you can see what the error actually is? Perhaps if you set the debugger to break on exceptions?

[muzamilashfaq]

Yes the error is in browser.js

[vlad-ignatov]

It is hard to tell from a screenshot, but I can see a const there. There is something wrong with this build. How are you importing the library?

[chgl]

I've had the same issue. Transpiling these packages did the trick, see my vue.config.js:

module.exports = {
  transpileDependencies: ["fhirpath", "fhirclient", "debug"],
};

(In case you plan on using fhirpath as well it has a similar issue).

I'm not familiar enough with the whole Babel thing to know if this may also be possible or more convenient to "fix" upstream.

[muzamilashfaq]

Its worked in Vue.js as @chgl mentioned Thanks for the help.

[muzamilashfaq]

I have imported fhirclient in my auth.js file and compile with webpack and babel and got the error,
(I haven't worked with babel and webpack before so struggling from two days)

[vlad-ignatov]

I can confirm that debug is problematic because it ships un-transpiled ES6 code. It is a common pattern in Webpack loaders to skip the entire node_modules folder, but if you use debug that doesn't work. It needs to be configured explicitly. For example https://github.com/smart-on-fhir/client-js/blob/master/webpack.config.js#L126-L129

However, I still think that this shouldn't happen the way it did for you. It is either a matter of proper Webpack or Babel configuration, or wrong usage. Can you provide a snippet of you import or require statements and maybe a webpack.config?

[muzamilashfaq]

here is my babel.config.json

and webpack.json

[bhinebaugh]

I'm not able to reproduce that error when testing with a basic Vue app generated via the Vue CLI. Importing fhirclient and building the app yields no untranspiled code in the resulting .js files for me.

Nothing looks particularly out of place in your Babel and Webpack configuration. Since you mentioned you are new to using them, can I ask how are you importing fhirclient in your auth.js? (by name or via path is going to make a difference in how npm and Babel are involved)

[SvetlozarValchev]

Same issue:

I'm using Aurelia 1.3.0

I include the library in package.json, then include it like this: import {oauth2 as SMART} from "fhirclient" so it's definitely going through webpack and babel.

I discovered this on my second project, so I got back to my first one using the client-js library, and it has the same issues (Aurelia again).
It uses the basic aurelia boilerplate with the aurelia-cli au new <project-name>

Edit:

I disabled the minify (and uglify) to be able to inspect the code better and it seems that its getting bundled without going through babel for some reason, here's the unuglified code:

It's complaining that 'const' is the 'unexpected identifier'.

I'll have to find a way to transpile that specific library, but you should publish your package so the used code is already transpiled to ES5.

Edit 2:

Loading the /build/fhir-client.js directly also doesn't solve the problem. Now it says Out of stack space

[SvetlozarValchev]

Yup, only way to fix this at the moment is to include the barebones build/fhir-client.js directly as a script tag <script src="..."></script> in index.html.
If you include it directly import 'fhirclient/build/fhir-client', you'll get Error: Out of stack space.
If you include it as a module import {oauth2 as SMART} from "fhirclient" you'll get expected identifier which is because the code didn't transpile.

How to reproduce:

1. Get aurelia-cli
2. Type au new
3. Enter project name
4. Select Default TypeScript App
5. Select Yes, use NPM
6. Get in the aurelia directory
7. Install fhirclient npm install fhirclient
8. Open src/app.ts
9. Add at the top of the file: import {oauth2 as SMART} from "fhirclient"
10. Add method attached with authorize call and params, the app.ts should look like this:

import {oauth2 as SMART} from "fhirclient"

export class App {
  public message: string = 'Hello World!';

  attached() {
    SMART.authorize({
      client_id: "...",
      scope: "...",
      iss: "...",
    });
  }
}

11. Type au run
12. Open http://127.0.0.1:8080/ in Internet Explorer 11
13. Observe error Possible Unhandled Promise Rejection: SyntaxError: Expected identifier

[pgross41]

I also have this issue, it's because of the destructured assignment from getSmartApi on Line 7 in browser.js:

Source code

const adapter = new BrowserAdapter_1.default();
const {
  ready,
  authorize,
  init,
  client,
  options
} = adapter.getSmartApi();

Bundle

const r=new(n(257).default),{ready:i,authorize:o,init:a,client:s,options:u}=r.getSmartApi();

A minimal example to recreate the issue in the IE console is this:

const {test} = {test: 1}

---

My application uses destructured assignments and it is transpiled away just fine:

Source code

const { firstName, lastName } = parseNames(fhirUser);

Bundle

  (u = (0, a.parseNames)(o)),
  (c = u.firstName),
  (l = u.lastName)

I can't figure out how to make it transpile it out of fhirclient. 🙁

Edit: I'm using babel 6.26.3 and webpack 4.17.2.

[pgross41]

Looks like I'm able to import 'fhirclient/build/fhir-client' as a workaround but it makes FHIR global and adds 167 KB to the bundle (compared to importing the module).

[vlad-ignatov]

Importing fhirclient/build/fhir-client works. That is the same as including it via script tag, which might be even better as the bundler will not even have to deal with import 'fhirclient/build/fhir-client' statements...

Anyway, I had not used Aurelia before so I had to mess around. It looks like I found a solution, although I'm not sure if it is the best one. Perhaps there is a better way to configure Aurelia to do this? Here is what I found:

The fhirclient library ships two folders:

• build - contains browser bundles
• lib - contains ES6 files

When used as a module (in node or through a bundler), the lib folder should be used.

Initially I though that Aurelia is not properly following the "browser" key from fhirclient's package.json because there are such complaints online. However, this is probably fixed now and even if I import "fhirclient/lib/entry/browser", I still have the same issue.

With vanilla TS projects, if allowJs is set in tsconfig.json, JS files are also managed with TSC. This does not seem to be the case with Aurelia. To fix that I used the following (somewhat brute-force) approach:

In webpack.config.js:

// Replace the following line:
{ test: /\.ts$/, loader: "ts-loader" },
// with this:
{ test: /\.[jt]s$/, loader: "ts-loader", include: [ srcDir, path.join(__dirname, "node_modules/fhirclient") ]},

[SvetlozarValchev]

We moved to Vue and are importing it like this - import "fhirclient/build/fhir-client" and using FHIR as part of the global (window) object. It works without an issue in IE11 so far.

[pgross41]

I found how to make IE work with webpack. It's very common for configs to have babel ignore node_modules, example:

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: 'babel-loader',
    }
}

Explicitly adding the fhir client as a separate rule will cause babel to transpile the code despite the node_modules exclusion.

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: 'babel-loader',
    },
    {
      test: /fhirclient/,
      loader: 'babel-loader'
    },
  ]
},

Modules in /lib for browser apps are typically pre-transpiled to ES5. Removing the node 10 target does make it work in IE. I realize this client can be used as a Node library as well as a browser library though. My main concern is bundle size. These are the sizes I saw for my project:

Today:

• Using the prebuilt browser version with global FHIR: 1,521 KB

Compared to...

• Importing the node modules as-is (no IE support): 1,347 KB (-174)
• Compiling client-js with no target in babel config (you transpile it): 1,432 KB (-89)
• Use babel-loader in webpack config (I transpile it): 1,364 KB (-157)

Based on those numbers I propose you change nothing and I will transpile it downstream in my project 😊 however, it might be helpful to put this info somewhere in the documentation.