Css-loader: Promise is not defined error in 0.19.0

[chrismcband]

Latest release is failing builds for me, seeing the error below in 0.19.0. This error is not present in 0.18.0.

ERROR in ./~/css-loader!./app/main.css
Module build failed: ReferenceError: Promise is not defined
    at LazyResult.async (/Users/chris/IdeaProjects/SW2.0/survivejs/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:152:31)
    at LazyResult.then (/Users/chris/IdeaProjects/SW2.0/survivejs/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:75:21)
    at processCss (/Users/chris/IdeaProjects/SW2.0/survivejs/node_modules/css-loader/lib/processCss.js:174:5)
    at Object.module.exports (/Users/chris/IdeaProjects/SW2.0/survivejs/node_modules/css-loader/lib/loader.js:22:2)
 @ ./app/main.css 4:14-75 13:2-17:4 14:20-81

Here's the webpack config:

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');

var ROOT_PATH = path.resolve(__dirname);

module.exports = {
  entry: path.resolve(ROOT_PATH, 'app'),
  output: {
    path: path.resolve(ROOT_PATH, 'build'),
    filename: 'bundle.js'
  },
  devtool: 'eval-source-map',
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style', 'css'],
        include: path.resolve(ROOT_PATH, 'app')
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlwebpackPlugin({
      title: 'Kanban app'
    })
  ]
};

And package.json:

{
  "name": "survivejs",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.19.0",
    "html-webpack-plugin": "^1.6.1",
    "node-libs-browser": "^0.5.3",
    "style-loader": "^0.12.4",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.11.0"
  }
}

[bebraw]

The problem might be that they removed Promise polyfill in postcss 5.0. Perhaps we should push this upstream?

[ben-eb]

@bebraw PostCSS 5.0 does not support node 0.10, but you can polyfill the Promise API yourself:

https://github.com/jakearchibald/es6-promise

[bebraw]

@ben-eb Alright. Thanks for the info.

[chrismcband]

Thanks, works after upgrading node to 4.1.1, didn't realise I was so far behind.

[bebraw]

@chrismcband It might be good to resolve, or at least document this, regardless. Great to hear you got it to work, though.

[szubtsovskiy]

Thanks, upgrading node to 4.1.1 did help. Note for OS X users: Homebrew does not have the updated formula, so it is pretty useless to run "brew upgrade". I had to download an official package from Node.js website.

[haukurmar]

Wow... I thought I was going crazy and it did not cross my mind that I had to update node, but that worked and I'm very happy now :)

ps. I updated through Homebrew just fine, just ran "brew update" first and then "brew upgrade node".

[chrismcband]

Same here, upgraded node through homebrew just fine. In my case it was still showing the old node version, but that was just a $PATH issue where I had an older version of node installed as part of a boxen installation.

[oreillyross]

Same here, upgraded node to latest version 4.1.1 and works as expected

[AsaAyers]

How exactly do you pollyfill Promise to make this work? I tried this and it just produced a different error about an object not being a function.

// I added this to the top of my `webpack.config.js`
if (global.Promise == null) {
    global.Promise = require('es6-promise')
}

[ben-eb]

@AsaAyers https://github.com/jakearchibald/es6-promise#auto-polyfill

[hungpham]

Thanks @ben-eb

[patterncoder]

You rock @gregkbarnes! My app would still not deploy on Azure after upgrading to 4.1.2, your polyfill example fixed the issue.

[jonstuebe]

@gregkbarnes that worked for me too. seems like that needs to be added. thanks for the help!

[fengjunoo]

@gregkbarnes Thanks! It's worked.

[luck2011]

saved my day...

[jackgeek]

I'm getting this on node v5.3.0...

[markdalgleish]

@sokra are you happy to close this issue and mark as wontfix? What are your thoughts on support for older versions of Node?

[dreyescat]

If it is an old node version issue it could be solved setting a minimal engine version in the package.json.

For example, adding the following field to the package.json file would prevent installing this module on environments with node versions below 0.12.0:

"engines": {
  "node": ">=0.12.0"
}

You are not supporting old versions but at least it is explicit which ones are.

[sokra]

@dreyescat Good idea. Would you like to make a PR?

[jbq]

I spent several hours trying to understand what was going on with weird error messages like:

Uncaught Error: Cannot find module "!!./../../node_modules/css-loader/index.js!./main.css"

Adding this in gulpfile.js helped:

// Support for Node 0.10
// See https://github.com/webpack/css-loader/issues/144
require('es6-promise').polyfill();

Ensuring this or the node version directly in css-loader would be great.

[bebraw]

Closing given the related PR was merged.

[surger]

Thank you, @ben-eb!

Add to webpack.config.js
require('es6-promise').polyfill();

and it's now working!