ReactJs + webpack + ie + console.log

Question

I have a project wrote in JSX and I use webpack to build the main.js file.

This is my webpack.config.js:

var path = require('path');

module.exports = {
  entry:{  main: [
            'consolelog',
            'es5-shim',
            'es5-shim/es5-sham',
            'es6-shim',
            'es6-shim/es6-sham',
"./app/client"
        ]},

  output: {
    filename: '[name].js',
    chunkFilename: '[id].chunk.js',
    path: path.join('public', 'js'),
    publicPath: '/js/'
  },

  module: {
    loaders: [
      { test: /\.js$/, loader: 'jsx-loader?harmony&insertPragma=React.DOM' },
      { test: require.resolve('react'), loader: 'expose?React' },

    ]
  }
};

My problem is that I cannot make my project work under IE (I test with IE9 at the moment). It always says "console is undefined".

With Firefox and Chrome it works perfectly.

What do I do wrong?

I tried with console-polyfill too but same result.

IE9 says that it fails at this line of javascript code :

_deprecationWarning2['default']('CollapsableNav', 'CollapsibleNav', 'https://github.com/react-bootstrap/react-bootstrap/issues/425#issuecomment-97110963');

But there is no console.log on it.

What do I do wrong?

Thank you in advance!

Answer 1

In browsers that don't support console, you need to strip console functions from your code. For webpack you can use webpack-strip. One way to use is as follows:

var WebpackStrip = require('webpack-strip')

Then add { test: /\.js$/, loader: WebpackStrip.loader('console.log', 'console.error') } to loaders to strip console.log and console.error

{
    module: {
        loaders: [
            { test: /\.js$/, loader: 'jsx-loader?harmony&insertPragma=React.DOM' },
            { test: require.resolve('react'), loader: 'expose?React' },
            { test: /\.js$/, loader: WebpackStrip.loader('console.log', 'console.error') }
        ]
    }
};