How to remove global "use strict" added by babel

JavascriptJshintBabeljsUse Strict

Javascript Problem Overview


I'm using function form of "use strict" and don't want global form which Babel adds after transpilation. The problem is I'm using some libraries that aren't using "use strict" mode and it might throw error after scripts are concatenated

Javascript Solutions


Solution 1 - Javascript

As it has already been mentioned for Babel 6, it's the transform-es2015-modules-commonjs preset which adds strict mode. In case you want to use the whole es2015 preset without module transformations, put this in your .babelrc file:

{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}

This will disable modules and strict mode, while keeping all other es2015 transformations enabled.

Solution 2 - Javascript

Babel 5

You'd blacklist "useStrict". For instance here's an example in a Gruntfile:

babel: {
    options: {
        blacklist: ["useStrict"],
        // ...
    },
    // ...
}
Babel 6

Since Babel 6 is fully opt-in for plugins now, instead of blacklisting useStrict, you just don't include the strict-mode plugin. If you're using a preset that includes it, I think you'll have to create your own that includes all the others, but not that one.

Solution 3 - Javascript

There's now a babel plugin that you can add to your config that will remove strict mode: babel-plugin-transform-remove-strict-mode. It's a little ugly in that the "use strict" gets added and then removed, but it makes the config much nicer.

Docs are in the GitHub repo: https://github.com/genify/babel-plugin-transform-remove-strict-mode

Your .babelrc ends up looking like this:

{
  "presets": ["env"],
  "plugins": ["transform-remove-strict-mode"]
}

Solution 4 - Javascript

I also came accross this rather ridiculous limitation that you cannot disable or overwrite settings from an existing preset, and have resorted to using this preset instead: https://www.npmjs.com/package/babel-preset-es2015-without-strict

Solution 5 - Javascript

plugins: [
    [
        require("@babel/plugin-transform-modules-commonjs"), 
        {
            strictMode: false
        }
    ],
]

Solution 6 - Javascript

You can tell babel that your code is a script with:

sourceType: "script"

This will not add use strict. See sourceType option docs

Source: https://github.com/babel/babel/issues/7910#issuecomment-388517631

Solution 7 - Javascript

Babel 6 + es2015

We can disabled babel-plugin-transform-es2015-modules-commonjs to require babel-plugin-transform-strict-mode.

So comment the following code in node_modules/babel-plugin-transform-es2015-modules-commonjs/lib/index.js at 151 line

//inherits: require("babel-plugin-transform-strict-mode"),

Solution 8 - Javascript

Personally, I use the gulp-iife plugin and I wrap IIFEs around all my files. I noticed that the babel plugin (using preset es2015) adds a global "use strict" as well. I run my post babel code through the iife stream plugin again so it nullifies what babel did.

gulp.task("build-js-source-dev", function () {
	return gulp.src(jsSourceGlob)
      .pipe(iife())
	  .pipe(plumber())
	  .pipe(babel({ presets: ["es2015"] }))// compile ES6 to ES5
	  .pipe(plumber.stop())
      .pipe(iife()) // because babel preset "es2015" adds a global "use strict"; which we dont want
      .pipe(concat(jsDistFile)) // concat to single file
	  .pipe(gulp.dest("public_dist"))
});

Solution 9 - Javascript

just change .babelrc solution

if you don't want to change any npm modules, you can use .babelrc ignore like this

{
  "presets": ["es2015"],
  "ignore": [
    "./src/js/directive/datePicker.js"
  ]
}

ignore that file, it works for me!

the ignored file that can't use 'use strict' is old code, and do not need to use babel to transform it!

Solution 10 - Javascript

Since babel 6 you can install firstly babel-cli (if you want to use Babel from the CLI ) or babel-core (to use the Node API). This package does not include modules.

npm install --global babel-cli
# or
npm install --save-dev babel-core

Then install modules that you need. So do not install module for 'strict mode' in your case.

npm install --save-dev babel-plugin-transform-es2015-arrow-functions

And add installed modules in .babelrc file like this:

{
  "plugins": ["transform-es2015-arrow-functions"]
}

See details here: https://babeljs.io/blog/2015/10/31/setting-up-babel-6

Solution 11 - Javascript

For babel 6 instead of monkey patching the preset and/or forking it and publishing it, you can also just wrap the original plugin and set the strict option to false.

Something along those lines should do the trick:

const es2015preset = require('babel-preset-es2015');
const commonjsPlugin = require('babel-plugin-transform-es2015-modules-commonjs');

es2015preset.plugins.forEach(function(plugin) {
  if (plugin.length && plugin[0] === commonjsPlugin) {
    plugin[1].strict = false;
  }
});

module.exports = es2015preset;

Solution 12 - Javascript

Please use "es2015-without-strict" instead of "es2015". Don't forget you need to have package "babel-preset-es2015-without-strict" installed. I know it's not expected default behavior of Babel, please take into account the project is not mature yet.

Solution 13 - Javascript

This is not grammatically correct, but will basically work for both Babel 5 and 6 without having to install a module that removes another module.

code.replace(/^"use strict";$/, '')

Solution 14 - Javascript

I just made a script that runs in the Node and removes "use strict"; in the selected file.

file: script.js:

let fs = require('fs');
let file = 'custom/path/index.js';
let data = fs.readFileSync(file, 'utf8');
let regex = new RegExp('"use\\s+strict";');
if (data.match(regex)){
    let data2 = data.replace(regex, '');
    fs.writeFileSync(file, data2);
    console.log('use strict mode removed ...');
}
else {
    console.log('use strict mode is missing .');
}

node ./script.js

Solution 15 - Javascript

if you are using https://babeljs.io/repl (v7.8.6 as of this writing), you can remove "use strict"; by selecting Source Type -> Module.

Solution 16 - Javascript

Using plugins or disabling modules and strict mode as suggested in the @rcode's answer didn't work for me.

But, changing the target from es2015|es6 to es5 in tsconfig.json file as suggested by @andrefarzart in this GitHub answer fixed the issue.

// tsconfig.json file
{
  // ...
  "compilerOptions": {
    // ...
    "target": "es5", // instead of "es2015"
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionani hView Question on Stackoverflow
Solution 1 - JavascriptrcodeView Answer on Stackoverflow
Solution 2 - JavascriptT.J. CrowderView Answer on Stackoverflow
Solution 3 - JavascriptAlan PierceView Answer on Stackoverflow
Solution 4 - JavascriptAdam ReisView Answer on Stackoverflow
Solution 5 - JavascriptKley AndromorfiaView Answer on Stackoverflow
Solution 6 - JavascriptYair KukielkaView Answer on Stackoverflow
Solution 7 - JavascriptshihongzhiView Answer on Stackoverflow
Solution 8 - JavascriptBrian SchermerhornView Answer on Stackoverflow
Solution 9 - JavascripthislandView Answer on Stackoverflow
Solution 10 - JavascriptAlina PoluykovaView Answer on Stackoverflow
Solution 11 - JavascriptJoschaView Answer on Stackoverflow
Solution 12 - JavascriptKosView Answer on Stackoverflow
Solution 13 - JavascriptTravis WebbView Answer on Stackoverflow
Solution 14 - JavascriptkolserdavView Answer on Stackoverflow
Solution 15 - JavascriptAbdullView Answer on Stackoverflow
Solution 16 - JavascriptWesley GonçalvesView Answer on Stackoverflow