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

From the looks of it you are using es6 since you are using babel and if you read here http://stackoverflow.com/questions/31685262/not-recommended-to-write-out-use-strict-with-es6. Why do you need to write strict? — Mike D, Jan 20 '16 at 18:35
See http://stackoverflow.com/questions/33821312/how-to-remove-global-use-strict-added-by-babel — Eric O'Connell, Jan 20 '16 at 23:35
@MikeD: I have checked in my project I didn't write anywhere in my code "use strict" it will automatically came in bundle.js file — Dhaval Patel, Jan 21 '16 at 06:17
@EricO'Connell: Thanks Can you please answer it with above mentioned post so I can upvote and other people can use it — Dhaval Patel, Jan 21 '16 at 06:18

ivarni · Answer 1 · 2017-02-14T13:55:38.363

10

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.

edited Feb 14 '17 at 13:55

answered Mar 01 '16 at 13:47

ivarni

17,658
17
76
92

2

Thanks for this. I was getting no specific line number from IE since I'm using browser.js, but I skimmed through and found multiple id properties on an element. – monalisa717 May 09 '16 at 20:19
1

This is the better of the two answers. – boatcoder Jul 18 '16 at 19:40

score 5 · Answer 2 · answered May 30 '16 at 14:27

5

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.

answered May 30 '16 at 14:27

creimers

4,975
4
33
55

Dhaval Patel · Accepted Answer · 2020-07-19T10:56:49.587

2

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

 blacklist: ["useStrict"]

and it's working fine.

edited Jul 19 '20 at 10:56

answered Feb 03 '16 at 10:08

Dhaval Patel

7,471
6
37
70

This is not working in Babel version 6 and above, it only works for Babel 5. – simeg Feb 05 '17 at 22:35

DAVID AJAYI · Answer 4 · 2020-07-15T06:28:33.877

You have few ways around this, bottom line setting modules to false either in .babelrc or your webpack since you use webpack

webpack.mix.js

module : {
        loaders : [
            {
                test: /\.js?/,
                include: APP_DIR,
                use: {
                    loader: 'babel-loader',
                    options: {
                        "presets": [
                            ['es2015', {modules: false}]
                        ],
                    }
                },
                exclude: /node_modules/
            },
        ]
    },

or .babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "debug": true,
                "modules": false,
                "forceAllTransforms": true,
                "useBuiltIns": "usage"
            }
        ]
    ]
}

How to disable strict mode while bundling React using webpack

4 Answers4

Linked