How to disable strict mode while bundling React using webpack

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

Method 2

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.

Method 3

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

 blacklist: ["useStrict"]

and it’s working fine.

Method 4

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"
            }
        ]
    ]
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x