Posted in Uncategorized

webpack 2.6.0 can’t find variable: Promise on require async

   February 23, 2021  8 Comments on webpack 2.6.0 can’t find variable: Promise on require async

Do you want to request a feature or report a bug?

What is the current behavior?

Having ReferenceError: Can’t find variable: Promise when using require(['dep'], callback)

If the current behavior is a bug, please provide the steps to reproduce.

So, I’m using karma to run tests on phantomjs with webpack, and phantomjs doesn’t have native promises. So, this is why I have this in my webpack.config (also, for older browsers):

...
new webpack.ProvidePlugin({
  Promise: 'es6-promise-promise'
}),
...

Then, on my code, I could do something like this, and everything worked fine until webpack@2.5.1 (and under, in fact, since 1.x this worked fine):

console.log('promise', Promise);
require(['left-pad'], function (leftpad) {
  // ...
});

But then, simply by upgrading to webpack@2.6.0, I get the ReferenceError: Can't find variable: Promise error now.

I believe this is because webpack uses promises to load the chunks, and somehow stopped replacing variables from ProvidePlugin on its own boilerplate.

What is the expected behavior?

Promises should work when defined on ProvidePlugin, even if it is webpack generated code, right?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

macOS, but also happened on ubuntu. Node 6.9. Webpack 2.6.0

Author: Fantashit

8 thoughts on “webpack 2.6.0 can’t find variable: Promise on require async”

  1. Hm… facing a similar issue (in IE 11) with possibly the same cause, even without any asynchronous loading.

    Seems that the generated webpackBootstrap (defines webpackJsonp) code includes a line like this:

    var resolvedPromise = new Promise(function(resolve) { resolve(); });

    This line was / is not present using webpack 2.5.x.

  4. Still have the problem on webpack 2.6.1. Someone else?

    Part of my config:

    // ...
plugins: [
                new webpack.optimize.CommonsChunkPlugin({
                    names: ["common", "manifest"],
                    minChunks: Infinity
                }),

                new webpack.ProvidePlugin({
                    Promise: "bluebird",
                    "window.Promise": "bluebird",
                    "global.Promise": "bluebird"
                })
            ]
// ...

    And error is inside the manifest.js

  5. Still erroring on:

    var resolvedPromise = new Promise(function(resolve) { resolve(); });

    all IE <= 11 issue not present with 2.5.1

  6. The 2.6.1 version seems to fix it. All calls to Promise are now done inside a function which gets called at a later time. The first thing I have on my entry file is import 'core-js'; which provides the Promise polyfill.

  8. I don’t want to bother my original Webpack config, so here is a workaround:

    <script>
window.Promise || document.write(
  '<script src="//cdn.jsdelivr.net/es6-promise/4.1.0/es6-promise.auto.min.js"><\/script>'
)
</script>
<script type="text/javascript" src="js/manifest.15a34c.js"></script><script type="text/javascript" src="js/vendor.ab046a.js"></script><script type="text/javascript" src="js/app.6fa5fc.js"></script>

Comments are closed.