Skip to content

@babel/preset-env doesn't include fetch polyfill #9160

New issue
New issue
Closed
Closed
@babel/preset-env doesn't include fetch polyfill#9160
Labels
outdatedA closed issue/PR that is archived due to age. Recommended to make a new issue
@halafi

Description

@halafi
halafi
opened on Dec 11, 2018

Bug Report

Current Behavior
I am building a React app with Webpack and Babel, using .browserslistrc to support Chrome 41 (mainly for SEO purposes), currently in Chrome 41 I get error:

Unhandled promise rejection ReferenceError: fetch is not defined

Expected behavior/code
I expect that babel should include all needed polyfills, currenlty fetch polyfill seems to not be included.

getting error: Unhandled promise rejection ReferenceError: fetch is not defined

Babel Configuration (.babelrc, package.json, cli command)

In root js client file I import babel/polyfill wtih:
import '@babel/polyfill';

.babelrc:

{
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "debug": true,
        "useBuiltIns": "entry"
      }
    ],
    "@babel/preset-flow"
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-class-properties",
    "react-hot-loader/babel",
    [
      "styled-components",
      {
        "displayName": false
      }
    ],
    "ramda"
  ]
}

Environment

  • Babel version(s): v7.2.0
  • Node/npm version: Node 10.5.0 / npm 6.1.0
  • OS: OSX 10.14
  • How you are using Babel: babel-loader
        loader: 'babel-loader',
        options: {
          babelrc: true,
        },

Additional context/Screenshots
Output from @babel/preset-env: DEBUG option

Picks up correct browser (chrome 41)

Using targets:
{
  "android": "4.2",
  "chrome": "41",
  "edge": "17",
  "firefox": "52",
  "ie": "11",
  "ios": "9.3",
  "opera": "56",
  "safari": "10.1"
}

Using modules transform: auto

Using plugins:
  transform-template-literals { "android":"4.2", "ie":"11" }
  transform-literals { "android":"4.2", "chrome":"41", "firefox":"52", "ie":"11" }
  transform-function-name { "android":"4.2", "chrome":"41", "edge":"17", "firefox":"52", "ie":"11", "ios":"9.3" }
  transform-arrow-functions { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  transform-block-scoped-functions { "android":"4.2", "ios":"9.3" }
  transform-classes { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  transform-object-super { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  transform-shorthand-properties { "android":"4.2", "chrome":"41", "ie":"11" }
  transform-duplicate-keys { "android":"4.2", "chrome":"41", "ie":"11" }
  transform-computed-properties { "android":"4.2", "chrome":"41", "ie":"11" }
  transform-for-of { "android":"4.2", "chrome":"41", "firefox":"52", "ie":"11", "ios":"9.3" }
  transform-sticky-regex { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  transform-dotall-regex { "android":"4.2", "chrome":"41", "edge":"17", "firefox":"52", "ie":"11", "ios":"9.3", "safari":"10.1" }
  transform-unicode-regex { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3", "safari":"10.1" }
  transform-spread { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  transform-parameters { "android":"4.2", "chrome":"41", "edge":"17", "firefox":"52", "ie":"11", "ios":"9.3" }
  transform-destructuring { "android":"4.2", "chrome":"41", "edge":"17", "firefox":"52", "ie":"11", "ios":"9.3" }
  transform-block-scoping { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  transform-typeof-symbol { "android":"4.2", "ie":"11" }
  transform-new-target { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  transform-regenerator { "android":"4.2", "chrome":"41", "firefox":"52", "ie":"11", "ios":"9.3" }
  transform-exponentiation-operator { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  transform-async-to-generator { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  proposal-async-generator-functions { "android":"4.2", "chrome":"41", "edge":"17", "firefox":"52", "ie":"11", "ios":"9.3", "safari":"10.1" }
  proposal-object-rest-spread { "android":"4.2", "chrome":"41", "edge":"17", "firefox":"52", "ie":"11", "ios":"9.3", "safari":"10.1" }
  proposal-unicode-property-regex { "android":"4.2", "chrome":"41", "edge":"17", "firefox":"52", "ie":"11", "ios":"9.3", "safari":"10.1" }
  proposal-json-strings { "android":"4.2", "chrome":"41", "edge":"17", "firefox":"52", "ie":"11", "ios":"9.3", "opera":"56", "safari":"10.1" }
  proposal-optional-catch-binding { "android":"4.2", "chrome":"41", "edge":"17", "firefox":"52", "ie":"11", "ios":"9.3", "safari":"10.1" }

Using polyfills with `entry` option:

[/Users/filiphalas/Projects/tweb/src/client/index.js] Replaced `@babel/polyfill` with the following polyfills:
  es6.array.copy-within { "android":"4.2", "chrome":"41", "ie":"11" }
  es6.array.fill { "android":"4.2", "chrome":"41", "ie":"11" }
  es6.array.find { "android":"4.2", "chrome":"41", "ie":"11" }
  es6.array.find-index { "android":"4.2", "chrome":"41", "ie":"11" }
  es6.array.from { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es7.array.includes { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.array.iterator { "android":"4.2", "ie":"11" }
  es6.array.of { "android":"4.2", "chrome":"41", "ie":"11" }
  es6.array.sort { "android":"4.2", "chrome":"41", "ios":"9.3" }
  es6.array.species { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.date.to-json { "ios":"9.3" }
  es6.date.to-primitive { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.function.has-instance { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.function.name { "ie":"11" }
  es6.map { "android":"4.2", "chrome":"41", "firefox":"52", "ie":"11", "ios":"9.3" }
  es6.math.acosh { "android":"4.2", "ie":"11" }
  es6.math.asinh { "android":"4.2", "ie":"11" }
  es6.math.atanh { "android":"4.2", "ie":"11" }
  es6.math.cbrt { "android":"4.2", "ie":"11" }
  es6.math.clz32 { "android":"4.2", "ie":"11" }
  es6.math.cosh { "android":"4.2", "ie":"11" }
  es6.math.expm1 { "android":"4.2", "ie":"11" }
  es6.math.fround { "android":"4.2", "ie":"11" }
  es6.math.hypot { "android":"4.2", "ie":"11" }
  es6.math.imul { "android":"4.2", "ie":"11" }
  es6.math.log1p { "android":"4.2", "ie":"11" }
  es6.math.log10 { "android":"4.2", "ie":"11" }
  es6.math.log2 { "android":"4.2", "ie":"11" }
  es6.math.sign { "android":"4.2", "ie":"11" }
  es6.math.sinh { "android":"4.2", "ie":"11" }
  es6.math.tanh { "android":"4.2", "ie":"11" }
  es6.math.trunc { "android":"4.2", "ie":"11" }
  es6.number.constructor { "android":"4.2", "ie":"11" }
  es6.number.epsilon { "android":"4.2", "ie":"11" }
  es6.number.is-finite { "ie":"11", "opera":"56" }
  es6.number.is-integer { "android":"4.2", "ie":"11" }
  es6.number.is-nan { "ie":"11", "opera":"56" }
  es6.number.is-safe-integer { "android":"4.2", "ie":"11" }
  es6.number.max-safe-integer { "android":"4.2", "ie":"11" }
  es6.number.min-safe-integer { "android":"4.2", "ie":"11" }
  es6.number.parse-float { "android":"4.2", "ie":"11" }
  es6.number.parse-int { "android":"4.2", "ie":"11" }
  es6.object.assign { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es7.object.define-getter { "android":"4.2", "chrome":"41", "ie":"11" }
  es7.object.define-setter { "android":"4.2", "chrome":"41", "ie":"11" }
  es7.object.entries { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.object.freeze { "android":"4.2", "chrome":"41", "ie":"11" }
  es6.object.get-own-property-descriptor { "android":"4.2", "chrome":"41", "ie":"11" }
  es7.object.get-own-property-descriptors { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.object.get-own-property-names { "android":"4.2", "ie":"11" }
  es6.object.get-prototype-of { "android":"4.2", "chrome":"41", "ie":"11" }
  es7.object.lookup-getter { "android":"4.2", "chrome":"41", "edge":"17", "ie":"11" }
  es7.object.lookup-setter { "android":"4.2", "chrome":"41", "edge":"17", "ie":"11" }
  es6.object.prevent-extensions { "android":"4.2", "chrome":"41", "ie":"11" }
  es6.object.is { "ie":"11", "opera":"56" }
  es6.object.is-frozen { "android":"4.2", "chrome":"41", "ie":"11" }
  es6.object.is-sealed { "android":"4.2", "chrome":"41", "ie":"11" }
  es6.object.is-extensible { "android":"4.2", "chrome":"41", "ie":"11" }
  es6.object.keys { "android":"4.2", "ie":"11" }
  es6.object.seal { "android":"4.2", "chrome":"41", "ie":"11" }
  es6.object.set-prototype-of { "android":"4.2" }
  es7.object.values { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.promise { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es7.promise.finally { "android":"4.2", "chrome":"41", "edge":"17", "firefox":"52", "ie":"11", "ios":"9.3", "safari":"10.1" }
  es6.reflect.apply { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.reflect.construct { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.reflect.define-property { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.reflect.delete-property { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.reflect.get { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.reflect.get-own-property-descriptor { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.reflect.get-prototype-of { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.reflect.has { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.reflect.is-extensible { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.reflect.own-keys { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.reflect.prevent-extensions { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.reflect.set { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.reflect.set-prototype-of { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.regexp.constructor { "android":"4.2", "chrome":"41", "edge":"17", "ie":"11", "ios":"9.3" }
  es6.regexp.flags { "android":"4.2", "chrome":"41", "edge":"17", "ie":"11" }
  es6.regexp.match { "android":"4.2", "chrome":"41", "edge":"17", "ie":"11", "ios":"9.3" }
  es6.regexp.replace { "android":"4.2", "chrome":"41", "edge":"17", "ie":"11", "ios":"9.3" }
  es6.regexp.split { "android":"4.2", "chrome":"41", "edge":"17", "ie":"11", "ios":"9.3" }
  es6.regexp.search { "android":"4.2", "chrome":"41", "edge":"17", "ie":"11", "ios":"9.3" }
  es6.regexp.to-string { "android":"4.2", "chrome":"41", "edge":"17", "ie":"11", "ios":"9.3" }
  es6.set { "android":"4.2", "chrome":"41", "firefox":"52", "ie":"11", "ios":"9.3" }
  es6.symbol { "android":"4.2", "chrome":"41", "edge":"17", "ie":"11", "ios":"9.3" }
  es7.symbol.async-iterator { "android":"4.2", "chrome":"41", "edge":"17", "firefox":"52", "ie":"11", "ios":"9.3", "safari":"10.1" }
  es6.string.anchor { "ie":"11", "opera":"56" }
  es6.string.big { "ie":"11", "opera":"56" }
  es6.string.blink { "ie":"11", "opera":"56" }
  es6.string.bold { "ie":"11", "opera":"56" }
  es6.string.code-point-at { "android":"4.2", "ie":"11" }
  es6.string.ends-with { "android":"4.2", "ie":"11" }
  es6.string.fixed { "ie":"11", "opera":"56" }
  es6.string.fontcolor { "ie":"11", "opera":"56" }
  es6.string.fontsize { "ie":"11", "opera":"56" }
  es6.string.from-code-point { "android":"4.2", "ie":"11" }
  es6.string.includes { "android":"4.2", "ie":"11" }
  es6.string.italics { "ie":"11", "opera":"56" }
  es6.string.iterator { "android":"4.2", "ie":"11" }
  es6.string.link { "ie":"11", "opera":"56" }
  es7.string.pad-start { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es7.string.pad-end { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.string.raw { "android":"4.2", "ie":"11" }
  es6.string.repeat { "android":"4.2", "ie":"11" }
  es6.string.small { "ie":"11", "opera":"56" }
  es6.string.starts-with { "android":"4.2", "ie":"11" }
  es6.string.strike { "ie":"11", "opera":"56" }
  es6.string.sub { "ie":"11", "opera":"56" }
  es6.string.sup { "ie":"11", "opera":"56" }
  es6.typed.array-buffer { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.typed.int8-array { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.typed.uint8-array { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.typed.uint8-clamped-array { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.typed.int16-array { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.typed.uint16-array { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.typed.int32-array { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.typed.uint32-array { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.typed.float32-array { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.typed.float64-array { "android":"4.2", "chrome":"41", "ie":"11", "ios":"9.3" }
  es6.weak-map { "android":"4.2", "chrome":"41", "firefox":"52", "ie":"11" }
  es6.weak-set { "android":"4.2", "chrome":"41", "firefox":"52", "ie":"11" }
  web.timers { "android":"4.2", "chrome":"41", "edge":"17", "firefox":"52", "ie":"11", "ios":"9.3", "opera":"56", "safari":"10.1" }
  web.immediate { "android":"4.2", "chrome":"41", "edge":"17", "firefox":"52", "ie":"11", "ios":"9.3", "opera":"56", "safari":"10.1" }
  web.dom.iterable { "android":"4.2", "chrome":"41", "edge":"17", "firefox":"52", "ie":"11", "ios":"9.3", "opera":"56", "safari":"10.1" }

Other DEBUG errors:
import '@babel/polyfill' was not found.` (I take it this is fine babel/babel-loader#657)

will appreciate if there is anything I can try

Metadata

Metadata

Assignees

No one assigned

    Labels

    outdatedA closed issue/PR that is archived due to age. Recommended to make a new issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions