IE 11 Symbol is not defined

[makarov-roman]

Here is .babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [
          "Chrome >= 52",
          "FireFox >= 44",
          "Safari >= 7",
          "Explorer 11",
          "last 4 Edge versions"
        ]
      }
    }],
    "react",
    "es2015",
    "stage-1"
  ],

  "ignore": [
    "node_modules"
  ],
  "plugins": [
    "syntax-flow",
    "transform-decorators-legacy",
    "transform-class-properties",
    "transform-object-rest-spread",
    "transform-flow-strip-types",
    "syntax-class-properties"
  ]
}

and deps

{
    "babel-preset-env": "^1.2.1",    
    "babel-core": "^6.23.1",
    "babel-eslint": "^7.1.1",
    "babel-jest": "^19.0.0",
    "babel-loader": "^6.4.0",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-syntax-class-properties": "^6.8.0",
    "babel-plugin-syntax-flow": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.23.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-es2017": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-1": "^6.22.0",
    "babel-plugin-transform-class": "^0.3.0",
    "babel-plugin-transform-es2015-modules-systemjs": "^6.23.0"
}

Thank you for the work! Great tool

[yavorsky]

Hi, @rmakarov94!

1. Thanks for the issue and your kind words 😊
2. According to specified targets, babel-preset-env provides:

a) babel-plugins, b) polyfills.

babel-plugins (see more) transforms your es6 code to es5:
let a = 1; -> var a = 1;

babel-polyfill (see more) adds things like Promise, Symbol, setImmediate , prototype methods ([1, 2].includes(2)) etc..

babel-preset-env includes plugins by default. To include polyfill you need:

• specify useBuiltIns: true in presets options (see more)
• include import "babel-polyfill" to your codebase.

3. As I can see you added es2015 preset to your presets list. babel-preset-env includes es2015, es2016 and es2017 presets, so including es2015 directly will add all plugins from es2015 and just devalue preset-env usage.

4. transform-flow-strip-types is a part of flow preset which included in react preset.

5. syntax-flow also could be passed.

6. transform-object-rest-spread included in stage-3 preset which is a part of stage-1.

Ok, trying to format your config to be more effective:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [
          "Chrome >= 52",
          "FireFox >= 44",
          "Safari >= 7",
          "Explorer 11",
          "last 4 Edge versions"
        ]
      },
      "useBuiltIns": true
    }],
    "react",
    "stage-1"
  ],
  "ignore": [
    "node_modules"
  ],
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties",
    "syntax-class-properties"
  ]
}

Hope it will help. Sorry if I missed something.

[makarov-roman]

@yavorsky wow! It's much more than I expected. Everything is works perfectly now. Great thanks.

[hzoo]

I would recommend not using stage-x presets and include individual plugins, and you don't need "syntax-class-properties" if you have "transform-class-properties"

[wasong]

@hzoo thanks for the tip! 👍 If you could, I'd like to know why we should we use individual plugins instead of stage-x presets?