Webpacker: babel-polyfill is not included/loaded

[schuylr]

I noticed that the README states that babel-polyfill is included, however there's no reference to it in any entry points:

http://babeljs.io/docs/usage/polyfill/#usage-in-node-browserify-webpack

Is this something we must do ourselves?

[ytbryan]

It is only installed here https://github.com/rails/webpacker/blob/66115ba76ccd36e8cdd6e19b24b76f1c5f039119/lib/install/template.rb#L33

maybe you can send in a PR for this?

[schuylr]

I can't seem to put a require or import anywhere for it - I still end up missing prototype[Symbol.iterator] for my Arrays, so I'm not sure where it should be added or if my configuration is just off.

[lsanwick]

I corrected this by changing the /config/webpack/shared.js to have entry paths that include the polyfill:

module.exports = {
  entry: packPaths.reduce((map, entry) => {
    const localMap = map
    const namespace = relative(join(entryPath), dirname(entry))
    localMap[join(namespace, basename(entry, extname(entry)))] = ['babel-polyfill', resolve(entry)]
    return localMap
  }, {}),
  ...
}

[gauravtiwari]

You can do the same in your main entry/packs file.

[gauravtiwari]

@lsanwick Doesn't this option takes care of adding correct polyfill during compilation? https://github.com/babel/babel-preset-env#usebuiltins What do you have in your babelrc?

[lsanwick]

NOTE: This does not currently polyfill experimental/stage-x built-ins like the regular "babel-polyfill" does. This will only work with npm >= 3 (which should be used with Babel 6 anyway)

I'm using generators, so I don't believe that is covered by the useBuiltins flag.

[lsanwick]

@gauravtiwari:

Here is my .babelrc and debug output.

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "useBuiltIns": true,
        "debug": true
      }
    ],
    "react",
    "stage-1"
  ],
  "plugins": [
    "syntax-dynamic-import", [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ]
}

babel-preset-env: `DEBUG` option
07:39:33 webpack.1 |
07:39:33 webpack.1 | Using targets:
07:39:33 webpack.1 | {
07:39:33 webpack.1 |   "android": "4.4",
07:39:33 webpack.1 |   "chrome": "49",
07:39:33 webpack.1 |   "edge": "14",
07:39:33 webpack.1 |   "firefox": "53",
07:39:33 webpack.1 |   "ie": "11",
07:39:33 webpack.1 |   "ios": "10",
07:39:33 webpack.1 |   "safari": "10.1",
07:39:33 webpack.1 |   "uglify": true
07:39:33 webpack.1 | }
07:39:33 webpack.1 |
07:39:33 webpack.1 | Modules transform: false
07:39:33 webpack.1 |
07:39:33 webpack.1 | Using plugins:
07:39:33 webpack.1 |   check-es2015-constants {"android":"4.4","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-arrow-functions {"android":"4.4","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-block-scoped-functions {"android":"4.4","uglify":true}
07:39:33 webpack.1 |   transform-es2015-block-scoping {"android":"4.4","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-classes {"android":"4.4","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-computed-properties {"android":"4.4","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-destructuring {"android":"4.4","chrome":"49","edge":"14","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-duplicate-keys {"android":"4.4","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-for-of {"android":"4.4","chrome":"49","edge":"14","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-function-name {"android":"4.4","chrome":"49","edge":"14","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-literals {"android":"4.4","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-object-super {"android":"4.4","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-parameters {"android":"4.4","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-shorthand-properties {"android":"4.4","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-spread {"android":"4.4","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-sticky-regex {"android":"4.4","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-template-literals {"android":"4.4","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-typeof-symbol {"android":"4.4","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-es2015-unicode-regex {"android":"4.4","chrome":"49","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-regenerator {"android":"4.4","chrome":"49","ie":"11","uglify":true}
07:39:33 webpack.1 |   transform-exponentiation-operator {"android":"4.4","chrome":"49","ie":"11","ios":"10","uglify":true}
07:39:33 webpack.1 |   transform-async-to-generator {"android":"4.4","chrome":"49","edge":"14","ie":"11","ios":"10","uglify":true}
07:39:33 webpack.1 |   syntax-trailing-function-commas {"android":"4.4","chrome":"49","ie":"11","uglify":true}
07:39:33 webpack.1 |
07:39:33 webpack.1 | Using polyfills:
07:39:33 webpack.1 |   es6.typed.array-buffer {"android":"4.4","chrome":"49","ie":"11"}
07:39:33 webpack.1 |   es6.typed.int8-array {"android":"4.4","chrome":"49","ie":"11"}
07:39:33 webpack.1 |   es6.typed.uint8-array {"android":"4.4","chrome":"49","ie":"11"}
07:39:33 webpack.1 |   es6.typed.uint8-clamped-array {"android":"4.4","chrome":"49","ie":"11"}
07:39:33 webpack.1 |   es6.typed.int16-array {"android":"4.4","chrome":"49","ie":"11"}
07:39:33 webpack.1 |   es6.typed.uint16-array {"android":"4.4","chrome":"49","ie":"11"}
07:39:33 webpack.1 |   es6.typed.int32-array {"android":"4.4","chrome":"49","ie":"11"}
07:39:33 webpack.1 |   es6.typed.uint32-array {"android":"4.4","chrome":"49","ie":"11"}
07:39:33 webpack.1 |   es6.typed.float32-array {"android":"4.4","chrome":"49","ie":"11"}
07:39:33 webpack.1 |   es6.typed.float64-array {"android":"4.4","chrome":"49","ie":"11"}
07:39:33 webpack.1 |   es6.map {"android":"4.4","chrome":"49","edge":"14","ie":"11"}
07:39:33 webpack.1 |   es6.set {"android":"4.4","chrome":"49","edge":"14","ie":"11"}
07:39:33 webpack.1 |   es6.weak-map {"android":"4.4","chrome":"49","edge":"14","ie":"11"}
07:39:33 webpack.1 |   es6.weak-set {"android":"4.4","chrome":"49","edge":"14","ie":"11"}
07:39:33 webpack.1 |   es6.reflect.apply {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.reflect.construct {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.reflect.define-property {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.reflect.delete-property {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.reflect.get {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.reflect.get-own-property-descriptor {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.reflect.get-prototype-of {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.reflect.has {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.reflect.is-extensible {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.reflect.own-keys {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.reflect.prevent-extensions {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.reflect.set {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.reflect.set-prototype-of {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.promise {"android":"4.4","chrome":"49","ie":"11"}
07:39:33 webpack.1 |   es6.symbol {"android":"4.4","chrome":"49","edge":"14","ie":"11"}
07:39:33 webpack.1 |   es6.object.assign {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.object.is {"ie":"11"}
07:39:33 webpack.1 |   es6.object.set-prototype-of {"android":"4.4"}
07:39:33 webpack.1 |   es6.function.name {"android":"4.4","chrome":"49","edge":"14","ie":"11"}
07:39:33 webpack.1 |   es6.string.raw {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.string.from-code-point {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.string.code-point-at {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.string.repeat {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.string.starts-with {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.string.ends-with {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.string.includes {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.regexp.flags {"android":"4.4","edge":"14","ie":"11"}
07:39:33 webpack.1 |   es6.regexp.match {"android":"4.4","chrome":"49","edge":"14","ie":"11"}
07:39:33 webpack.1 |   es6.regexp.replace {"android":"4.4","chrome":"49","edge":"14","ie":"11"}
07:39:33 webpack.1 |   es6.regexp.split {"android":"4.4","chrome":"49","edge":"14","ie":"11"}
07:39:33 webpack.1 |   es6.regexp.search {"android":"4.4","chrome":"49","edge":"14","ie":"11"}
07:39:33 webpack.1 |   es6.array.from {"android":"4.4","chrome":"49","edge":"14","ie":"11"}
07:39:33 webpack.1 |   es6.array.of {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.array.copy-within {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.array.find {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.array.find-index {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.array.fill {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.array.iterator {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.number.is-finite {"ie":"11"}
07:39:33 webpack.1 |   es6.number.is-integer {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.number.is-safe-integer {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.number.is-nan {"ie":"11"}
07:39:33 webpack.1 |   es6.number.epsilon {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.number.min-safe-integer {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.number.max-safe-integer {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.math.acosh {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.math.asinh {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.math.atanh {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.math.cbrt {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.math.clz32 {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.math.cosh {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.math.expm1 {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.math.fround {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.math.hypot {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.math.imul {"ie":"11"}
07:39:33 webpack.1 |   es6.math.log1p {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.math.log10 {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.math.log2 {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.math.sign {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.math.sinh {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.math.tanh {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es6.math.trunc {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es7.array.includes {"android":"4.4","ie":"11"}
07:39:33 webpack.1 |   es7.object.values {"android":"4.4","chrome":"49","ie":"11","ios":"10"}
07:39:33 webpack.1 |   es7.object.entries {"android":"4.4","chrome":"49","ie":"11","ios":"10"}
07:39:33 webpack.1 |   es7.object.get-own-property-descriptors {"android":"4.4","chrome":"49","edge":"14","ie":"11","ios":"10"}
07:39:33 webpack.1 |   es7.string.pad-start {"android":"4.4","chrome":"49","edge":"14","ie":"11"}
07:39:33 webpack.1 |   es7.string.pad-end {"android":"4.4","chrome":"49","edge":"14","ie":"11"}
07:39:33 webpack.1 |   web.timers {"android":"4.4","chrome":"49","edge":"14","firefox":"53","ie":"11","ios":"10","safari":"10.1"}
07:39:33 webpack.1 |   web.immediate {"android":"4.4","chrome":"49","edge":"14","firefox":"53","ie":"11","ios":"10","safari":"10.1"}
07:39:33 webpack.1 |   web.dom.iterable {"android":"4.4","chrome":"49","edge":"14","firefox":"53","ie":"11","ios":"10","safari":"10.1"}

[gauravtiwari]

@lsanwick I see, in the case your setup makes more sense 👍

[schuylr]

Here's my .babelrc:

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "useBuiltIns": true
      }
    ],
    "react"
  ],
  "plugins": [
    "syntax-dynamic-import",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ]
}

So I guess I should follow @lsanwick's setup? The .babelrc above is what I get after webpack:install:react so I'm not sure why this isn't all enabled by default.

[gauravtiwari]

@schuylr Yes if you are using that's not supplied by useBuiltins flag please do 👍

[schuylr]

Thanks for the help. Should there be a note for this added to the README, or perhaps config/webpack/shared.js gets updated when webpack:install:react is run? It very much doesn't "just work" when I have to make an issue to find this out.

[gauravtiwari]

@schuylr By default generators aren't supported - everything here is https://github.com/rails/webpacker#babel. Perhaps documenting this in README would be great 👍

[adamsanderson]

I think an easy change would be to indicate in the default javascript/packs/application.js that you need to include import "babel-polyfill". Otherwise the useBuiltIns option doesn't do anything since it transforms the import statement, but doesn't inject one.

References:
https://github.com/babel/babel-preset-env#usebuiltins

[gauravtiwari]

@adamsanderson Yes that's correct - best place is README for this because application.js example is really basic. Feel free to make a PR if you have sometime :)

[tai2]

As @adamsanderson said, you need import 'babel-polyfill' to use polyfill.

Including babel-polyfill in webpack entry like @lsanwick said is not suitable.
Because they will include multiple duplicated polyfills when users use multiple packs in a view.

When users use multiple packs at the same time, only one pack should import polyfill otherwise polyfill is overlapped. Or when users use each pack separately, which means one pack at a view, each one should import polyfill.