[SOLVED] My Meteor app does not work on Internet explorer 11

help
1

Hello everybody,

I’m front of a big problem in my solution and i’m unable to fix it after hours searching on the web, thus i choose to post this new topic to ask some help.

I’m pretty new on Meteor (2 month), so there is things that i’ve never seen :wink:

My Meteor version is 1.5.1
My IE version is 11.483.15063.0

Here’s my problem :

Yesterday I tryed to run my application on IE11 and the app crash at the beginning. My first problem was that arrow functions was not reconized by the browser. So I enabled “babel” compiler in order to get ES5 output.

Here’s my babel config (package.json) :

{
  "name": "jobdeal",
  "private": true,
  "babel": {
    "presets": [
      "env", "stage-1"
    ],
    "plugins": [
      [
        "transform-runtime",
        {
          "helpers": false,
          "polyfill": true,
          "regenerator": true,
          "moduleName": "babel-runtime"
        }
      ],
      "transform-es2015-arrow-functions"
    ]
  },
  "scripts": {
    "start": "meteor --settings settings.json"
  },
  "devDependencies": {
    "@chtijs/eslint-config": "^1.0.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "eslint": "^3.15.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-meteor": "^4.0.1",
    "eslint-plugin-react": "^6.10.0"
  },
  "dependencies": {
    "algoliasearch": "^3.22.1",
    "animate.css": "^3.5.2",
    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-1": "^6.24.1",
    "babel-runtime": "^6.25.0",
    "bcrypt": "^1.0.2",
    "bootstrap": "^3.3.7",
    "class-autobind": "^0.1.4",
    "classnames": "^2.2.5",
    "fullcalendar": "^3.3.1",
    "immutable": "^3.8.1",
    "jquery": "^2.2.4",
    "lodash": "^4.17.4",
    "meteor-node-stubs": "^0.2.5",
    "moment": "^2.17.1",
    "node-mailjet": "^1.1.0",
    "node-slack": "0.0.7",
    "please-wait": "0.0.5",
    "promise": "^7.1.1",
    "raleway-webfont": "^3.0.1",
    "random-token": "0.0.8",
    "react": "^15.4.2",
    "react-addons-css-transition-group": "^15.4.2",
    "react-addons-pure-render-mixin": "^15.4.2",
    "react-addons-transition-group": "^15.4.2",
    "react-addons-update": "^15.4.2",
    "react-boostrap-carousel": "^2.0.4",
    "react-bootstrap": "^0.30.7",
    "react-bootstrap-modal": "^3.0.1",
    "react-confirm": "^0.1.14",
    "react-datetime": "^2.8.9",
    "react-dom": "^15.4.2",
    "react-geosuggest": "^2.3.6",
    "react-modal": "^1.7.7",
    "react-parallax": "^1.2.3",
    "react-router": "^3.0.2",
    "react-select": "^1.0.0-rc.3",
    "react-table": "^5.3.4",
    "react-typeahead": "^2.0.0-alpha.5",
    "reactjs-bootstrap-table": "^1.0.12",
    "reactstrap": "^4.3.0",
    "string": "^3.3.3",
    "throttle-debounce": "^1.0.1"
  }
}

This config change my errors in console, now the console does not pop syntax error, but i have unknown package variable.

Here the screen of the new errors:

errors console
errors console1924×2852 200 KB

I keep searching, but i hope one of you have ever encouter this problem and would be able to help me.

Thank’s for reading and for help.
Best regards.

2

May I ask why you are using such a complex Babel setup? Normally it is sufficient to only include this in your package.json:

  "babel-runtime": "^6.23.0",
3

Hi,

As i said, i’m new in Meteor, i’m debugging my enterprise project and i don’t know if every conf is useful in the project.

But i tried some confs and figure that the babel conf was useless
Here the current conf changes;

{
  "name": "jobdeal",
  "private": true,
  "scripts": {
    "start": "meteor --settings settings.json"
  },
  "devDependencies": {
    "@chtijs/eslint-config": "^1.0.0",
    "eslint": "^3.15.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-meteor": "^4.0.1",
    "eslint-plugin-react": "^6.10.0"
  },
  "dependencies": {
    "algoliasearch": "^3.22.1",
    "animate.css": "^3.5.2",
    "babel-runtime": "^6.23.0",
    "bcrypt": "^1.0.2",
    "bootstrap": "^3.3.7",
    "class-autobind": "^0.1.4",
    "classnames": "^2.2.5",
    "fullcalendar": "^3.3.1",
    "immutable": "^3.8.1",
    "jquery": "^2.2.4",
    "lodash": "^4.17.4",
    "meteor-node-stubs": "^0.2.5",
    "moment": "^2.17.1",
    "node-mailjet": "^1.1.0",
    "node-slack": "0.0.7",
    "please-wait": "0.0.5",
    "promise": "^7.1.1",
    "raleway-webfont": "^3.0.1",
    "random-token": "0.0.8",
    "react": "^15.4.2",
    "react-addons-css-transition-group": "^15.4.2",
    "react-addons-pure-render-mixin": "^15.4.2",
    "react-addons-transition-group": "^15.4.2",
    "react-addons-update": "^15.4.2",
    "react-boostrap-carousel": "^2.0.4",
    "react-bootstrap": "^0.30.7",
    "react-bootstrap-modal": "^3.0.1",
    "react-confirm": "^0.1.14",
    "react-datetime": "^2.8.9",
    "react-dom": "^15.4.2",
    "react-geosuggest": "^2.3.6",
    "react-modal": "^1.7.7",
    "react-parallax": "^1.2.3",
    "react-router": "^3.0.2",
    "react-select": "^1.0.0-rc.3",
    "react-table": "^5.3.4",
    "react-typeahead": "^2.0.0-alpha.5",
    "reactjs-bootstrap-table": "^1.0.12",
    "reactstrap": "^4.3.0",
    "string": "^3.3.3",
    "throttle-debounce": "^1.0.1"
  }

And the error are the same. I tryied to configure babel in order to transform arrow function in ostrio_file.js
But know i have update the package and it is ES5 compatible.

So my problem still there because I have à lot of errors, I found a similar topic and try to resolve my bug with this solution but it does not work.

Thank’s for your answer.

4

Do you have the ecmascript package in your APP_ROOT/.meteor/packages file?

5

Hi,

yeah, as you can see:

# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor-base@1.1.0             # Packages every Meteor app needs to have
mobile-experience@1.0.4       # Packages for a great mobile UX
mongo@1.1.19                   # The database Meteor supports right now
blaze-html-templates@1.0.4 # Compile .html files into Meteor Blaze views
reactive-var@1.0.11            # Reactive variable for tracker
jquery@1.11.10                  # Helpful client-side library
tracker@1.1.3                 # Meteor's client-side reactive programming library

standard-minifier-css@1.3.4   # CSS minifier run for production mode
standard-minifier-js@2.1.1    # JS minifier run for production mode
es5-shim@4.6.15                # ECMAScript 5 compatibility for older browsers.
ecmascript@0.8.1             # Enable ECMAScript2015+ syntax in app code
shell-server@0.2.4            # Server-side component of the `meteor shell` command

accounts-password@1.4.0
twbs:bootstrap
fortawesome:fontawesome
momentjs:moment
react-meteor-data


ostrio:files
ostrio:meteor-root

mdg:geolocation
dburles:collection-helpers
universe:i18n
percolate:synced-cron
matb33:collection-hooks
juliancwirko:s-alert
juliancwirko:s-alert-bouncyflip
http@1.2.12
mdg:seo
mystor:device-detection
richsilv:owl-carousel

audit-argument-checks@1.0.7
check@1.2.5
promise@0.8.9

jobdeal:collections
aldeed:simple-schema
npm-bcrypt@0.9.3
fourseven:scss
mrt:googlemaps
mrt:cron
dynamic-import@0.1.1
6

Okay - in that case I’d recommend removing packages / dependencies one by one until the problem goes away, to help narrow down the true cause of the issue. Otherwise if you’re able to link to a runnable reproduction of this issue, we’ll take a look!

7

Ok thank’s i’ll try it and be back to inform you :wink:

8

Hi everybody,

I have update all my libs and remove path from import of some libs and it works, thank’s a lot for your help

Here you can found the other part of the solution (remove path from import) : [Solved][1.4.2.7] Help! Meteor can't resolve its own packages

See ya :wink:
Best regards.