Comments (17)
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.
from client-js.
Any chance you can see what the error actually is? Perhaps if you set the debugger to break on exceptions?
from client-js.
Yes the error is in browser.js
from client-js.
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?
from client-js.
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.
from client-js.
Its worked in Vue.js as @chgl mentioned Thanks for the help.
from client-js.
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)
from client-js.
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
?
from client-js.
and webpack.json
from client-js.
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)
from client-js.
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
from client-js.
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:
- Get aurelia-cli
- Type
au new
- Enter project name
- Select
Default TypeScript App
- Select
Yes, use NPM
- Get in the aurelia directory
- Install fhirclient
npm install fhirclient
- Open
src/app.ts
- Add at the top of the file:
import {oauth2 as SMART} from "fhirclient"
- Add method
attached
withauthorize
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: "...",
});
}
}
- Type
au run
- Open
http://127.0.0.1:8080/
in Internet Explorer 11 - Observe error
Possible Unhandled Promise Rejection: SyntaxError: Expected identifier
from client-js.
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.
from client-js.
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).
from client-js.
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 bundleslib
- 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") ]},
from client-js.
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.
from client-js.
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.
from client-js.
Related Issues (20)
- Support for CryptoKey objects as private keys HOT 6
- 502 Gateway Error on codesandbox HOT 2
- Failing in web client projects due to NodeJS usage without polyfills. HOT 13
- Support for browser using multiple SMART clients at once. HOT 3
- Unable to authorize using PKCE HOT 2
- Typo in README
- Unable to get patientId after successful login HOT 1
- (Error handling skipped on init) CompleteAuth not triggered for init HOT 1
- includeResponse not working for FHIR update operations
- "target: popup" (etc) demos don't work in current Chromium HOT 2
- Single SMART_KEY breaks authorization of several users on server-side
- Jest + RTL :: Testing with FHIRClient
- Uncaught (in promise) Error: Failed to fetch the conformance statement from "https://staging-fhir.ecwcloud.com/fhir/r4/FFBJCD/metadata". TypeError: Network request failed HOT 6
- Question: Smart-On-Fhir implementation inside Service Worker
- FHIR type Meta requiring lastUpdated property when spec allows it to be optional
- Node js After 10 min 401 unauthorized response HOT 4
- Window closes itself when it's not actually a popup
- Save token info in DB
- Support of PKCE even when the EHR .well-known configuration is not set? HOT 2
- Assumption on patient id in context
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from client-js.