App is blank on IE & egde [SOLVED]

help
1

Hi Meteor team!

First thanks for an awesome platform.

I’ve came across some issues when i’m looking at my application on internet explorer (All versions) + egde.
For some reasons i just get a blank page. And in my console i get a lot of errors See image

error
error1178×699 49.6 KB
Saying that meteorInstall is not defined a lot of places and therefor causing a lot of problems.

Here are my package.json file

"dependencies": {
    "@babel/runtime": "^7.0.0-beta.51",
    "@cleverbeagle/seeder": "^1.3.1",
    "@fortawesome/fontawesome": "^1.1.1",
    "@fortawesome/fontawesome-free-brands": "^5.0.12",
    "@fortawesome/fontawesome-pro-light": "^5.0.3",
    "@fortawesome/fontawesome-pro-regular": "^5.0.3",
    "@fortawesome/fontawesome-pro-solid": "^5.0.3",
    "@fortawesome/react-fontawesome": "0.0.17",
    "@okgrow/auto-analytics": "^2.0.0",
    "babel-runtime": "^6.26.0",
    "bcrypt": "^1.0.3",
    "commonmark": "^0.28.1",
    "cordova": "^8.0.0",
    "cordova-plugin-splashscreen": "^5.0.1",
    "cordova-plugin-statusbar": "^2.4.1",
    "core-js": "^2.5.1",
    "handlebars": "^4.0.11",
    "hide-virtual-keyboard": "^1.0.1",
    "ios-sim": "^6.1.2",
    "jquery": "^2.2.4",
    "jquery-validation": "^1.17.0",
    "juice": "^4.2.2",
    "lodash": "^4.17.4",
    "meteor-node-stubs": "^0.3.2",
    "moment": "^2.20.1",
    "moment-timezone": "^0.5.14",
    "parse-google-place": "^1.1.0",
    "prop-types": "^15.6.0",
    "query-string": "^6.0.0",
    "react": "^16.2.0",
    "react-addons-pure-render-mixin": "^15.6.2",
    "react-autosuggest": "^9.3.4",
    "react-bootstrap": "^0.31.5",
    "react-bootstrap-slider": "^2.1.3",
    "react-copy-to-clipboard": "^5.0.1",
    "react-day-picker": "^7.0.5",
    "react-dom": "^16.2.0",
    "react-google-maps": "^9.4.3",
    "react-helmet": "^5.2.0",
    "react-intl": "^2.4.0",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.2.2",
    "react-share": "^2.1.1",
    "react-slick": "^0.23.1",
    "react-swipeable": "^4.2.0",
    "simpl-schema": "^0.3.2",
    "underscore": "^1.8.3"
  },

And my meteor packages are here:

meteor-base@1.4.0             # Packages every Meteor app needs to have
mobile-experience@1.0.5       # Packages for a great mobile UX
mongo@1.5.0                   # The database Meteor supports right now
reactive-var@1.0.11            # Reactive variable for tracker
tracker@1.2.0                 # Meteor's client-side reactive programming library

standard-minifier-css@1.4.1   # CSS minifier run for production mode
standard-minifier-js@2.3.4    # JS minifier run for production mode
es5-shim@4.8.0                # ECMAScript 5 compatibility for older browsers.
ecmascript@0.11.1              # Enable ECMAScript2015+ syntax in app code
shell-server@0.3.1            # Server-side component of the `meteor shell` command

react-meteor-data
alanning:roles
fourseven:scss
twbs:bootstrap
accounts-base@1.4.2
accounts-password@1.5.1
service-configuration@1.0.11
themeteorchef:bert
fortawesome:fontawesome
aldeed:collection2-core@2.0.1
audit-argument-checks@1.0.7
ddp-rate-limiter@1.0.7
dynamic-import@0.4.0
static-html
mdg:seo
universe:i18n
reywood:publish-composite
mdg:meteor-apm-agent
underscore@1.0.10
mdg:geolocation
btafel:accounts-facebook-cordova

I’m using meteor version 1.7.0.3 :slight_smile:
Thanks!

1 Like
2

Try running the app with production flag to see if that changes things.

Are you using the new mainModule setting?

3

Hi Storyteller, thanks for your response.

I’m getting the same error when running it with production flag on. Just in a bundled file. It seems that it’s an arrow function in my module.js file that causing it. (See image here)

error2
error2871×510 11.7 KB

Any idea how to solve it?

I’m not sure if we use mainModule, never heard of it since I’m quite new to meteor.js.

4

If you are not aware of it then you are probably not using it.

Let’s start with the obvious and double check your brackets and the offending source in general.

5

Hi again,

We managed to find the error - it was in a the “query-string” package we used. We used a version 6+ but as they state on their site for older browsers you need to use version 5. https://www.npmjs.com/package/query-string

So the fix for anyone else was npm install query-string@5

Thanks for you time Storyteller! :slight_smile:

3 Likes
6

I’m having this same issue in IE11 only. Same big list of errors with the same text. But I’m not using query-string. I even did a meteor npm list to hunt for it and it’s not there.

IE11_errors
IE11_errors2574×2082 300 KB

What are the steps to figure out what package is causing the issue?

The only thought I had is that in the app we do some inlined importing after if statements and I was thinking maybe Babel misses these? I thought I read something about that. If your imports aren’t at the top of the file it could cause problems?

We are also using the mainModule pattern.

Also being able to test this on OS X using Virtual Box and the free Windows Developer VM downloads is pretty cool. Took me like fifteen minutes to get up and running. As my new machine doesn’t have Parallels on it.

7

Was testing this while very tired and didn’t see that first error line actually pointed to a real Syntax Error. It was an in error in the NPM version of simpl-schema. I guess there was a Babel config issue in 1.5.6 and @aldeed released 1.5.7 that fixes the issue. So IE11 is working now. Thank you @aldeed!

The rare easy fix to a major problem.

2 Likes