I have an Ember app that uses several 3rd party add-ons. One of these add-ons uses Object.assign() which causes problem in IE11, specifically the error
Error: Object doesn't support property or method 'assign'
I know why this is happening, but I'm relatively new to Ember, and am not sure of the best way to handle/fix this. Based on my research, some options are:
Option 1: use polyfills (?)
I think there may be some additional libraries I can install, or options in Babel to set that will take care of this, but I have not been able to do so thus far. It's unclear whether any of these options would affect code from add-ons anyway, or if they only apply to code in the primary app.
Option 2: extend the add-on component to avoid Object.assign().
Unfortunately, the problematic lines are in the component's init(). When my extended component calls this._super(), the code I'm trying to avoid is run anyway. Is there a way to 'skip' the base component's init() and go straight to Ember's Component.init() (the add-on's _super()) ?
Option 3: ditch the 3rd party add-on, salvage what I can, and make my own component.
Irritating but do-able. At this point, it probably would have been faster to do that from the start.
Option 4: fix the add-on to remove the problem code. My hesitation here is two fold: 1, if this is something that I should somehow be managing within my app, it doesn't seem correct to make the add-on change (though there is definitely a 'best practices' argument to be made here). The bigger concern is that this is a low activity add-on. Even if I submit a PR with the change, I'm not sure how long it will take for a new release.
In the meantime, what would be the recommended practice? Point my app to a local build and then remember to update it to an 'official' version if/when it is released?
I suspect that Option 1, polyfills and/or build settings, is the most correct course of action, but I'm at a loss for what, specifically, to do.
Additional info:
My app was developed with Ember 2.7, and I am in the process of updating it to Ember 3.1. This issue exists in both builds.
You can include polyfill:
// ember-cli-build.js
let app = new EmberApp(defaults, {
'ember-cli-babel': {
includePolyfill: true
}
});
Related
I'm using chart.js in my Aurelia application and it works fine.
I now want to add the chartjs-plugin-deferred plugin as well, and after having npm install:ed it and added it to aurelia.json's dependencies array I now get the following error:
Uncaught TypeError: Cannot read property 'helpers' of undefined
Pointing to the first couple of lines in the plugin code:
var Chart = window.Chart;
var helpers = Chart.helpers;
(Note that I don't even need to use the plugin (import 'chartjs-plugin-deferred'; for the error to appear; as soon as it's added to aurelia.json I get errors).
If I add a console.dir(window.Chart) before the lines that throw errors it is in fact not undefined, and if I try to use the plugin in my charts it actually works fine.
Can someone explain why this error occurs and if there's some way I can get rid of it? I feel uncomfortable shipping code that, while it works as it should, throws errors in the console.
I'm a huge fan of npm and imports etc but more often than not you run into issues such as these which imo is such a hassle and actually makes me miss the good old days of just piling script elements on top of each other.
Edit: I tried with a couple more plugins just to see if perhaps the deferred plugin was the issue here, but every other plugin I tried completely kills the build.
Does anyone have experience importing ChartJS and a ChartJS plugin into Aurelia successfully?
The issue at hand is that the library does not provide any meaningful way to jump in with a module loader and properly first fully load the dependency ChartJS before carrying on with the execution.
It would be the best if the library could wrap its code in a UMD compatible format to satisfy the most common formats at once, amongst those RequireJS, which is used for the Aurelia CLI.
I see you've created a Github Issue, including the libraries author as well. Good work, I've created a small PR to add the missing feature, which then also makes the example work, without throwing the missing helper error.
I am trying to move an application from using tornado templates (to be more accurate, it's jinja with an adapter) to ember.js.
It is my understanding that ember.js has very strong opinions on how to compose the final rendered product. In practice, it seems that the whole application must be generated from ember templates on the client side. The server side just provides data in REST format.
Is it possible to have ember work and take control only on some parts of a page that is mostly rendered by tornado templates (a la jquery plugins), or do I have to completely switch to ember?
Welcome, glad you're looking hard at Ember! You're right, Ember has definite opinions on how things should work :-) Despite that, it is indeed doable to migrate over in chunks.
You have a few options on how to handle this.
1. Build out from a single div on a page
You can see this in action on the builds page on the main Ember site (which is a small Ember app). Source for it is available here: https://github.com/ember-learn/builds/
Of interest is the fact that you can define the rootElement that you want Ember to render in to (see https://github.com/ember-learn/builds/blob/master/app/app.js although we should actually move that line to the config file). Once you have Ember on the page it is then possible to have it both interact with external Javascript or to have external Javascript call in as needed.
2. Sprinkle Ember components on to a page
If you need Ember to control multiple parts of the same page, you may want to look at https://github.com/mitchlloyd/ember-islands That addon is designed to work with server-rendered pages, so may not fit your setup. But it's another example of how to refactor in.
3. Use the new GlimmerJS (alpha)
You could also start refactoring into Ember using the newly announced GlimmerJS. The goal for this library is to allow folks to sprinkle in Ember and then as they need page routing and other aspects of Ember, allow them to switch over. So it may fit what you are after.
Note however that the GlimmerJS layer (on top of the Glimmer vm) is still quite new. What is there works well, but much of the Ember polish is still being added. So shipping to production could take some work ...
I am writing a new big project with ember latest version and I don't get any deprecation in console. does that means it will work without major change for glimmer release.
Is there any design patterns or best practices should i follow to ensure it will work without any change after glimmer release ? (I know only DDAU( data down and actions up principle) )
I assume you talk about Glimmer2, because the current ember rendering engine is already Glimmer.
And you don't have to do anything specific. Just keep away from private API's.
As long you just use public API's Glimmer2 should just drop in, as well as Glimmer1 did. Glimmer2 is (probably) not a breaking change, so even deprecations of public API's should not break it. Still try to avoid any deprecations.
We have a quite big application built on the version 1.8.1. We would like to migrate to version 2.0 or higher. We have a few guestions:
Does exist some step-by-step manual how to do it?
Can we use 2 different versions of ember in the same time? Because of continuous migration...
We would like to avoid overwriting of the whole application...
I would suggest you to update the ember. and keep deprecation warnings open. Then you can try investigating each warning one by one and update the code with the new syntax.
This guide can be very useful : Upgrade to ember 2.x step-by step
Since Ember uses global window scope, it will result in conflicts and its not advisable to use two versions of ember.
It's possible to load different Ember versions based on which route you are on, but I really don't recommend doing that, as you lose all the benefits of having a Single Page App (apps will load again when you transition between them), and you end up doing significantly more work for yourself, with more opportunities to screw up. I'd follow locks' advice and upgrade the app step by step, testing as you go.
I'm trying to find a better way of detecting an ember application than searching for ember-application or window.ember.
Any ideas?
Unfortunately, there's no guaranteed way to detect Ember or an Ember Application. Javascript is fairly malleable, so you could have either on a page and not know where.
To detect Ember, just check for window.Ember. Nothing fancy here, it's pretty much the only way to know (until Ember is no longer global that is). I would say this works in most scenarios (both Ember global and Ember CLI apps).
Detecting an Ember application is much more difficult. The last time I checked, the Ember Inspector does this by checking every property on the window object using Ember.Application.detectInstance(). However, given the gaining popularity of Ember CLI, that will no longer work much of the time. Maybe you could override Ember.Application.create() and keep track of the instances?
In any case, I certainly wouldn't rely on being able to do either of these. It's simply not feasible.