Internet Explorer issue with Meteor 1.4 app


#1

Hi guys,

my project (meteor 1.4 based) does NOT work on InternetExplorer.

In the console I see the following errors (in german language):

Digging deeper it seems like it begins with this arrow-function (const noop = () => { }), which gives a SYNTAX error:

As a result properties like packages.modules.meteorInstall are NOT available:

Any ideas what to try?


#2

That code snippet you showed with the noop looks like it’s from an npm package. In which case, the package has been built for modern(ish) JavaScript. That’s a common problem with recent npm package authors, who do not provide any code built for older JavaScript (ES5 maybe).

@benjamn provided some notes on this for the 1.7 release. You may be able to use the 2nd “trick” in Meteor 1.4 (I haven’t tried).


#3

@robfallows Thanks for your answer!

Do I get this right: Babel will compile meteors ES6 code back to “old" javascript (ES5 below) automatically, BUT npm-packages are NOT automatically run thru babel.

And there is a trick to force meteor to recompile npm-packages to “old“ javascript?

And I guess Internet Explorer just won’t handle newer syntax (p.e. the arrow function)?

Did I get this right?


#4

Correct. NPM package authors may or may not provide Babel transpilations to older JavaScript. That’s entirely up to them.

There’s probably more than one “trick”. Meteor 1.7 just happens to explicitly support some.

Check the browser compatibility here.


#5

Ok got one step further.

I include the analytics-node npm package in a shared file via

if (Meteor.isServer) {
  const Analytics = require('analytics-node')
  // ...
}

This is where the noop-stuff is injected. Its also injected in the client, which is stupid. I guess I’ll have to split the shared file into a client- server- version.

Good news: If I disable this line, it works in InternetExplorer


#6

Oh no!!! It ONLY works in EDGE-mode.

In InternetExplorer 10 (and lower versions) it breaks with the error-message object does NOT support proper "register".

This is related to the following code I wrote (I am using BlazeComponents here):

export const UiFormComponent = class UiFormComponent extends UiComponent {
  constructor(settings) {
    super();
    // ...
  }
}
console.log('UiFormComponent')
console.log(UiFormComponent)
console.log('UiFormComponent.register')
console.log(UiFormComponent.register)  // prints `undefined` in InternetExplorer
UiFormComponent.register('SuUiCrudFormComponent');  // BREAKS in InternetExplorer (!!)

The other strange error-message shown in the screenshot is `BlazeLayout warning: unknown template “LayoutComponent”``.

Any ideas what might be the reason?


#7

So whats the meteor way of debugging this? Any “best practices“ to save some time?