webpack: 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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 36
Comments: 23 (2 by maintainers)

Commits related to this issue

Use Promise only when chunk load is triggered don't use it in initialisation fixes #4916 — committed to webpack/webpack by sokra 7 years ago
Use Promise only when chunk load is triggered don't use it in initialisation fixes #4916 — committed to webpack/webpack by sokra 7 years ago
Use Promise only when chunk load is triggered don't use it in initialisation fixes #4916 — committed to webpack/webpack by sokra 7 years ago
Adding Core-JS as dependency Needed for testing only, as webpack 2.6 has a known bug polyfilling promises: https://github.com/webpack/webpack/issues/4916 — committed to leeDav/buildit by leeDav 7 years ago

Most upvoted comments

@sokra Will there be a bugfix release? It seems to have broken quite a lot of builds.

+20

andrenarchy on May 24, 2017

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

vansosnin on May 29, 2017

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>

kenberkeley on Jul 12, 2017

Actually what I do is have this in my html in the head:

window.Promise||document.write(‘<script src=" https://cdn.polyfill.io/v2/polyfill.min.js"></script>’);

That polyfills everything for any browser that doesn’t have Promise. That includes all of these features: https://polyfill.io/v2/docs/features/ Even though babel has already transformed all of those to safe es5 production code.

So I don’t have any polyfill in my app itself. I don’t force every modern browser to download that. Only the old browsers have to pay the price of that extra fetch.

https://polyfill.io/v2/docs/

On Thu, Jun 22, 2017 at 6:28 PM Chris Sattinger crucialfelix@gmail.com wrote:

Then yes, you do need a polyfill. See https://webpack.js.org/guides/code-splitting-async/#promise-polyfill

On Thu, Jun 22, 2017 at 6:25 PM Réda Housni Alaoui < notifications@github.com> wrote:

I am currently using webpack 2.6.1. I still need a promise polyfill because System.import still leads to ES6 Promise creation.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/webpack/webpack/issues/4916#issuecomment-310431599, or mute the thread https://github.com/notifications/unsubscribe-auth/AANWcnGig7rx4mEjgPaNk5RKd70A0yKKks5sGpWGgaJpZM4NjETV .

crucialfelix on Jun 22, 2017

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.

jmlopez-rod on May 31, 2017

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.

DorianGrey on May 23, 2017

Looks to be introduced in 22e7d254ee27e68569ea9718632accc870f52002.

kfeinUI on May 23, 2017

Still erroring on:

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

all IE <= 11 issue not present with 2.5.1

m3kka on May 31, 2017

Then yes, you do need a polyfill. See https://webpack.js.org/guides/code-splitting-async/#promise-polyfill

On Thu, Jun 22, 2017 at 6:25 PM Réda Housni Alaoui notifications@github.com wrote:

I am currently using webpack 2.6.1. I still need a promise polyfill because System.import still leads to ES6 Promise creation.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/webpack/webpack/issues/4916#issuecomment-310431599, or mute the thread https://github.com/notifications/unsubscribe-auth/AANWcnGig7rx4mEjgPaNk5RKd70A0yKKks5sGpWGgaJpZM4NjETV .

crucialfelix on Jun 22, 2017

It was a mistake in 2.6.0 where a Promise was used in the bootstrap code that loads your app. So this was being called before any code (your app) that has babel or other polyfills applied to it. It was fixed with 2.6.1

crucialfelix on Jun 22, 2017

Is it normal to be forced to add the Promise polyfill ourselves to make webpack work on IE 11?

reda-alaoui on Jun 22, 2017

thanks!

johnnyreilly on May 28, 2017

Experiencing same issue here. In our case the error it’s coming from manifest js: ReferenceError: Can't find variable: Promise at http://127.0.0.1:42069/unit-manifest-6eed6c926e1a80d7a48c.js:40.

dsizomin on May 23, 2017