How do we support IE with Ecmascript in a custom NPM package

Hi,

I have a custom NPM package that has ECMA scrip… low and behold on IE this dies. With meteor we’ve spoilt with the ecmascript package… so this stuff works. Can anyone please explain how how do this in my NPM custom package so I can support this?

I have included this in my code…

import {
  setMinimumBrowserVersions,
} from "meteor/modern-browsers";

setMinimumBrowserVersions({
  chrome: 49,
  firefox: 45,
  edge: 12,
  ie: Infinity,
  mobile_safari: [9, 2],
  opera: 36,
  safari: 9,
  electron: 1,
}, "minimum versions for ECMAScript 2015 classes");

But I am not sure how to handle the ES6 code?

It dies on IE11… which should be treated as legacy. Should babel be “auotmagically” polly filling the ES6 code into code it can handle?

More details on my original issue here https://github.com/meteor/meteor/issues/10163 but changed it to this forum post, as it’s probably more for a how to, I think.

thanks

@benjamn I moved that issue here… I actually converted my package to ES5 in frustration and moved my project back to Meteor 1.6.1 and now I am hitting errors with 3rd part packages like Google Firebase "@firebase/messaging": "^0.3.5", on IE11 eg it does not class.

Do have something setup incorrectly that ecmascript package is not doing it’s work… or just does not work this way?

The 1.7 release notes cover this use case, which seems to be a question of how to make ecmascript work with modern JavaScript npm packages. Not on my computer, so I may have missed something!

@robfallows thanks… yep, hoping it’s supported just need to better understand (explanation or dummies) how to do it for

  1. Custom NPM package we create that are in package.json

  2. 3rd party NPM packages in the package.json - is there a way to get

  3. Also is there a way to have a NPM module in package.json and keep it server only? eg we Firebase in the package.json but we only need on the server. I know how how to do this in a Meteor package but not clear on how I do this for NPM packages. Maybe the only way to do this is wrap the NPM package in a Meteor package?

thanks

Update: here’s an example of an error that I am experiencing on IE11 (works on other Modern browsers)

On my server I have

import {
  setMinimumBrowserVersions,
} from "meteor/modern-browsers";

setMinimumBrowserVersions({
  chrome: 49,
  firefox: 45,
  edge: 12,
  ie: Infinity,
  mobile_safari: [9, 2],
  opera: 36,
  safari: 9,
  electron: 1,
}, "minimum versions for ECMAScript 2015 classes");

In the IE11 browser console I see the following error

If I click into it… it’s complaining about the fat arrow function…

43%20pm

I thought that Meteor’s babel would convert these modules to ES5 for the non-Mordern browser (ie IE - excuse the pun)

Am I doing something wrong with 1.7.1 that has broken this… or am I meant to configure this to enable it in some way?

I did a global search for accounts-oauth and the only place I see it is in my .meteor/versions file with accounts-oauth@1.1.16-rc171.2

@robfallows @benjamn it seems like the setMinimumBrowserVersionsi s not kicking into action ie11… is there something I am missing? I have it running on the server… I have tried both inside/not-inside Meteor.startup

I am basing this on the fact above that there’s ES6 content showing up in the IE11 browser console.

I think you are maybe confusing two 1.7 features.

I was specifically referring to the technique of taking an npm package and processing it with ecmascript. That’s not the same as the ability to deliver legacy and modern JavaScript bundles.

1 Like

Sorry, which specific feature? These are just standard Mereor packages that are showing up with ES6 on legacy browsers.

Eg the oauth package above

Maybe I should stop trying to read these on a 3 inch screen! I thought you were having problems with npm packages.

@robfallows sorry some intertwined issues… I managed to make some progress.

ps. umm hoping you did not have to read this on mobile… appreciate the responses

TO try and debug this I tried to downgrade my project back to Meteor 1.6.1.3. So I have 3 categories of interrelated issues:

  1. the NPM packages that have ECMA script in… from the origial part of the thread I understand that I can create a file link to the folders in node_modules and Meteor should convert these from ES6 to ES5. I ended up converting me custom NPM module to ES5 manuually so I could try and resolve the other categories of issues

  2. With Meteor 1.7.1 IE11 is complaining about a bunch of standard Meteor packages containing ES6 code. So it seems like IE is either not using the legacy bundle or something wrong in the conversion

  3. With Meteor 1.6.1.3 - I can run this on IE11 on my local machine (Mac with VMware) and it works. When I try and run it from Galaxy I am getting the following issue

32%20pm
When I click the link it shows some Meteor generated code that containes r={...t}; so something borked in the conversion

In my downgrade process I had an issue as I had a left of modules@0.11.3 in my .meteor/packages which seemed to be the culprit, as I already had ecmascript@0.10.6 , so not sure if some sort of conflict that was breaking it. Once removed, when using Meteor 1.6.1.3 works locall (even with --production flag) but does nto work from galaxy. (as usual it works fine on Chrome, Safari etc)

Perhaps another mismatch in my packages/versions…

# Meteor packages used by this project, one per line.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

service-configuration@1.0.11


sacha:spin
underscore@1.0.10
manuelschoebel:cheerio
accounts-twitter@1.4.1
mrt:twit
mrt:twilio-meteor
alisalaah:hogan
accounts-facebook@1.3.1
accounts-password@1.5.0
meteorhacks:unblock

raix:ui-dropped-event
fastclick@1.0.13
mquandalle:ismobile
http@1.4.0
sakulstra:aggregate
reywood:publish-composite
bozhao:accounts-instagram
raix:handlebar-helpers
oauth2@1.2.0
maxharris9:connection-banner
adamgins:microsoft-oauth
johnantoni:meteor-appear
copleykj:jquery-autosize
djedi:sanitize-html
webapp@1.5.0
random@1.1.0
linto:jquery-ui
buzzy-buzz:google-api
reactive-var@1.0.11
meteorhacks:subs-manager
dburles:google-maps
browser-policy@1.1.0

mdg:geolocation
mizzao:timesync


meteor-base@1.3.0
mobile-experience@1.0.5
mongo@1.4.2
blaze-html-templates
session@1.1.7
tracker@1.1.3
logging@1.1.19
ejson@1.1.0
spacebars
check@1.3.0
less@2.7.11
lukemadera:social-share
harrison:papa-parse
meteorhacks:inject-initial

natestrauser:filepicker-plus
jparker:crypto-sha256
jparker:crypto-hmac


froatsnook:request
buzzy-buzz:resources-core
pfafman:filesaver
simple:reactive-method

buzzy-buzz:avatar
peppelg:bootstrap-3-modal
dispatch:deep-link

jquery@1.11.10


iron:router
okgrow:router-autoscroll
shell-server@0.3.1

boilerplate-generator@1.4.0

tsega:bootstrap3-datetimepicker

barbatus:stars-rating
froala:editor-reactive
raix:push
facebook-config-ui@1.0.1
twitter-config-ui@1.0.0
accounts-google@1.3.1
google-config-ui@1.0.0
email@1.2.3
cunneen:signature-pad
dynamic-import@0.3.0
buzzy-buzz:styleguide
mdg:seo
nimble:restivus
buzzy-buzz:ibmconnectionscloud-oauth
buzzy-buzz:ibm-watson-workspace-oauth
buzzy-buzz:slack-oauth
ostrio:files@1.7.17
risul:dropzone
buzzy-buzz:ibmconnectionsonprem-oauth
ostrio:meteor-root
okgrow:analytics
es5-shim@4.7.0
buzzy-buzz:ibmconnectionscloud-oauth-default
simple:rest
simple:rest-accounts-password
crosswalk@1.7.1

standard-minifier-js
minifier-js
ecmascript@0.10.6

Versions:

accounts-base@1.4.2
accounts-facebook@1.3.1
accounts-google@1.3.1
accounts-oauth@1.1.15
accounts-password@1.5.1
accounts-twitter@1.4.1
adamgins:microsoft-oauth@0.0.2
alisalaah:hogan@1.0.1
allow-deny@1.1.0
autoupdate@1.4.0
babel-compiler@7.0.7
babel-runtime@1.2.2
barbatus:stars-rating@1.1.1
base64@1.0.11
binary-heap@1.0.10
blaze@2.3.3
blaze-html-templates@1.1.2
blaze-tools@1.0.10
boilerplate-generator@1.4.0
bozhao:accounts-instagram@0.2.2
browser-policy@1.1.0
browser-policy-common@1.0.11
browser-policy-content@1.1.0
browser-policy-framing@1.1.0
buzzy-buzz:avatar@0.9.2
buzzy-buzz:google-api@1.0.3
buzzy-buzz:ibm-watson-workspace-oauth@0.0.2
buzzy-buzz:ibmconnectionscloud-oauth@0.0.2
buzzy-buzz:ibmconnectionscloud-oauth-default@0.0.2
buzzy-buzz:ibmconnectionsonprem-oauth@0.0.1
buzzy-buzz:resources-core@0.1.10
buzzy-buzz:slack-oauth@0.0.1
buzzy-buzz:styleguide@0.0.3
caching-compiler@1.1.12
caching-html-compiler@1.1.2
callback-hook@1.1.0
check@1.3.1
coffeescript@1.0.17
copleykj:jquery-autosize@1.17.8
crosswalk@1.7.1
cunneen:signature-pad@1.5.3
dburles:google-maps@1.1.5
ddp@1.4.0
ddp-client@2.3.2
ddp-common@1.4.0
ddp-rate-limiter@1.0.7
ddp-server@2.1.2
deps@1.0.12
dferber:prerender@2.2.2_3
diff-sequence@1.1.0
dispatch:deep-link@4.1.0
djedi:sanitize-html@1.11.3
dynamic-import@0.3.1
ecmascript@0.10.7
ecmascript-runtime@0.5.0
ecmascript-runtime-client@0.6.2
ecmascript-runtime-server@0.5.0
ejson@1.1.0
email@1.2.3
es5-shim@4.7.3
facebook-config-ui@1.0.1
facebook-oauth@1.4.1
fastclick@1.0.13
fortawesome:fontawesome@4.7.0
froala:editor@2.7.6
froala:editor-reactive@2.7.6
froatsnook:request@2.74.0
geojson-utils@1.0.10
google-config-ui@1.0.0
google-oauth@1.2.5
handlebars@1.0.7
harrison:papa-parse@1.1.7
hot-code-push@1.0.4
html-tools@1.0.11
htmljs@1.0.11
http@1.4.1
id-map@1.1.0
iron:controller@1.0.12
iron:core@1.0.11
iron:dynamic-template@1.0.12
iron:layout@1.0.12
iron:location@1.0.11
iron:middleware-stack@1.1.0
iron:router@1.1.2
iron:url@1.1.0
johnantoni:meteor-appear@0.0.2
jparker:crypto-core@0.1.0
jparker:crypto-hmac@0.1.0
jparker:crypto-md5@0.1.1
jparker:crypto-sha256@0.1.1
jparker:gravatar@0.5.1
jquery@1.11.11
launch-screen@1.1.1
less@2.7.12
linto:jquery-ui@1.11.2
livedata@1.0.18
localstorage@1.2.0
logging@1.1.20
lookback:emails@0.7.7
lookback:html-to-text@2.1.3_2
lukemadera:social-share@1.2.0
manuelschoebel:cheerio@0.0.1
maxharris9:connection-banner@0.5.0
mdg:geolocation@1.3.0
mdg:seo@1.1.0
meteor@1.8.6
meteor-base@1.3.0
meteorhacks:async@1.0.0
meteorhacks:inject-initial@1.0.4
meteorhacks:meteorx@1.4.1
meteorhacks:npm@1.5.0
meteorhacks:picker@1.0.3
meteorhacks:ssr@2.2.0
meteorhacks:subs-manager@1.6.4
meteorhacks:unblock@1.1.0
minifier-js@2.3.1
minimongo@1.4.4
mizzao:timesync@0.5.0
mobile-experience@1.0.5
mobile-status-bar@1.0.14
modules@0.11.8
modules-runtime@0.9.2
momentjs:moment@2.22.0
mongo@1.4.7
mongo-dev-server@1.1.0
mongo-id@1.0.7
mquandalle:ismobile@0.1.0
mrt:q@1.0.1
mrt:twilio-meteor@1.1.0
mrt:twit@0.2.0
natestrauser:filepicker-plus@2.0.0
nimble:restivus@0.8.12
npm-bcrypt@0.9.3
npm-mongo@2.2.34
oauth@1.2.3
oauth1@1.2.0
oauth2@1.2.0
observe-sequence@1.0.16
okgrow:analytics@3.0.5
okgrow:router-autoscroll@0.1.8
ordered-dict@1.1.0
ostrio:cookies@2.2.4
ostrio:files@1.9.9
ostrio:meteor-root@1.0.7
peppelg:bootstrap-3-modal@1.0.4
pfafman:filesaver@1.3.2
promise@0.10.2
raix:eventemitter@0.1.3
raix:eventstate@0.0.4
raix:handlebar-helpers@0.2.5
raix:push@3.3.0
raix:ui-dropped-event@0.0.7
random@1.1.0
rate-limit@1.0.9
reactive-dict@1.2.0
reactive-var@1.0.11
reload@1.2.0
retry@1.1.0
reywood:publish-composite@1.5.2
risul:dropzone@4.2.0
routepolicy@1.0.13
sacha:juice@0.1.4
sacha:spin@2.3.1
sakulstra:aggregate@1.4.3
server-render@0.3.1
service-configuration@1.0.11
session@1.1.8
sha@1.0.9
shell-server@0.3.1
shim-common@0.1.0
simple:authenticate-user-by-token@1.0.1
simple:json-routes@2.1.0
simple:reactive-method@1.0.2
simple:rest@1.1.1
simple:rest-accounts-password@1.1.2
simple:rest-bearer-token-parser@1.0.1
simple:rest-json-error-handler@1.0.1
socket-stream-client@0.1.0
spacebars@1.0.15
spacebars-compiler@1.1.3
srp@1.0.11
standard-minifier-js@2.3.1
templating@1.3.2
templating-compiler@1.3.3
templating-runtime@1.3.2
templating-tools@1.1.2
tracker@1.1.3
tsega:bootstrap3-datetimepicker@4.17.37_1
twitter-config-ui@1.0.0
twitter-oauth@1.2.0
ui@1.0.13
underscore@1.0.10
url@1.2.0
webapp@1.5.0
webapp-hashing@1.0.9

Phew any help appreciated :slight_smile:

I just tried blitzing the versions file… stil seems to be working when I hit my local version, but the Galaxy version still has some ES6 stuff in it… eg see https://debug.buzzy.buzz as an example.

@robfallows @benjamn I managed to get a downgraded version working… by replacing/merging my ./meteor/packages and ./meteor/versions with my old working version on Meteor 1.6.1.3

There were a few packages which were at different versions that got upgraded when moving to 1.7.1-rc2 that were obviously causing babel not to work. I have not isolated which one it was. If I search my project for .babelrc two npm packages come up estraverse & csv-parse.

So I am still in need of some idiots guide for

  1. how to get my custom NPM package in Meteor working with babel (i tried the imports way but it does not seem to work)… do I need to have a .babelrc and some scripts?

  2. How to resolve the issues on 1.7.1 where base meteor packages like accounts-oauth stopped getting converted to ES5 for legacy browsers… or the legacy bundle was not being used by IE11

As always, any help REALLY appreciated

Yup :roll_eyes:

You do not need a .babelrc or scripts (well, you could script the linking if you wanted to, but I don’t think that’s what you mean).

What commands did you use to try the imports way?

Meteor does not recompile the contents of node_modules by default. If you’re using Meteor 1.7+, and you want to compile an npm package, you should use one of the techniques described here:

@benjamn thanks.

I have 2 issues with 1.7: 1) meteor packages don’t seem to convert to ES5 on IE 2) my imports using symbolic links did not seem to work either.

I am probably doing something silly but I have an inclination that somehow I have a package version issue that’s causing the issue… as I got this with Meteor 1.6.1 until I revered to my original package version from an old branch. I isolated it down to approx 10 package version… but never go to identify the exact one. This was on 1.6.1.3

I can try and re-upgrade the working package to 1.7.1 and see if the same issue presents.

@benjamn this is one of my errors… Unable to import React components in sibling directory and my imports don’t seem to want to work, i after sym linking to the specific npm modules it still gets these errors.