Using babel runtime, but still got `ReferenceError: Can't find variable: Promise`

[ianwith]

I notice that Promise polyfill should be required.

But the question is, I am already using the babel runtime transformer to transform my code, and I got Object.assign() working just fine. Only new Promise() in whatwg fetch library throw error Can't find variable: Promise.

I am currently using require('es6-promise').polyfill();, and it works fine.

I am wondering why I still need promise polyfill since I am using babel runtime?

[ianwith]

ps. I am using webpack and babel-loader

    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]

.babelrc

{
  "presets": ["react", "es2015", "stage-0"],
  "plugins": ["transform-runtime"],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

[WizzieP]

Same problem, anybody?

[facundocabrera]

Yup, the same happen to me. The problem exists because the implementation assumes Promise object in the global scope. I'm trying to figure out which is the best approach, because the transform-runtime was created to handle this kind of assumptions.

From my perspective, the best solution should be a isomorphic-fetch package which transpile the dependencies using the babel runtime, so we don't need to solve that adding the requirement of add the polyfill for Promise before run any code.

If anyone knows a way to handle this differently, please let us know.

Thanks in advance

[ghost]

This is what I did: https://gist.github.com/Couto/b29676dd1ab8714a818f#gistcomment-1584602

[silvenon]

I'm not sure if this is cool, but this is what I did:

{
  test: /\.jsx?$/,
  include: [
    path.resolve(__dirname, "src"), // our source files
    /whatwg-fetch/, // but also the whatwg-fetch module
  ],
  loader: "babel-loader",
},

This way I'm processing whatwg-fetch with Babel as well, so transform-runtime patches its Promise usage.

[csmosx]

@silvenon's method is the most sensible. That plus adding import 'whatwg-fetch in your app as any normal package.

No need for a separate Promise polyfill doing it this way. And no need for any crazy webpack.ProvidePlugin using both imports-loader and exports-loader requiring npm installs of both.

[silvenon]

import isomorphic-fetch works as well because it requires whatwg-fetch, so it will still get processed by webpack with the above config.