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', '');

But there is no console.log on it.

What do I do wrong?

Thank you in advance!

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./react-bootstrap/react-bootstrap/issues/425#issuement-97110963');

But there is no console.log on it.

What do I do wrong?

Thank you in advance!

• javascript
• internet-explorer
• reactjs
• webpack

• Can you share the surrounding lines of code as well, please? At times the issue could be just above, or just below, the line you're being directed to. What happens if you create a faux console object before all of your code? window.console = window.console || { log: function(){}, error: function(){}, warn: function(){} };? – Sampson Commented Jun 4, 2015 at 19:56
• It works and go further. I will copy here line around but it looks like it is React-tools that use a lot of console.log The next error says: Object doesn't support property or method 'defineGetter' – 3xecutor Commented Jun 4, 2015 at 21:07
• Okay apparently it is the localStorage package that use it and it s not transformed. How can I add that automatically with webpack? So i don't have to do it manually everytime. Thanks for your help – 3xecutor Commented Jun 4, 2015 at 21:44

2 Answers 2

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') }
        ]
    }
};

You have to put both loaders in the same line. Instead of using loader, use loaders and pass an array with both loaders.