How to disable strict mode while bundling React using webpack

Question

Hello I am stuck with my application, my application working fine in all other browser not in IE it's throw the error

0x800a0416 - JavaScript runtime error: Multiple definitions of a property not allowed in strict mode

I have implemented loader in webpack.config

  module: {
    loaders: [{
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loaders: ['babel'],
        include: path.join(__dirname, 'scripts')
    }]
}

and my Package.json Script contain "build": "./node_modules/.bin/webpack --config webpack.config.production.js --progress --profile --colors", for build the bundle

If I will explicitly find use strict and remove it from bundle then it works fine so how can I remove that strict mode while create a bundle using webpack

Answer 1

Check out this package: https://www.npmjs.com/package/babel-plugin-transform-remove-strict-mode

I was looking for a convenient way to get rid of the 'use strict' and it seems to be doing just that.

Answer 2

I have include the blacklist option in my .babelrc file like

 blacklist: ["useStrict"]

and it's working fine.

Answer 3

If you're seeing that error then most likely you've got somewhere in your codebase where you're declaring multiple properties on the same object. Disabling the alarm bell just fixes the symptom.

I've found this error to pop up if I declare duplicate properties in my JSX, e.g. when doing <MyComponent className="foo" onClick={onClick} className="foobar" /> or accidentally duplicating some other property.

Find and fix the actual error instead of just suppressing the error message. IE should tell you what line it's happening on and it shouldn't be too hard to look at what's there and figure out which component has the problem.