options not work, neither targets ie11 in babel.config.js

[scil]

Webpack Version: "webpack": "^5.65.0",

Babel Core Version: "@babel/core": "^7.16.7",

Babel Loader Version: "babel-loader": "^8.2.3",

Please tell us about your environment: Windows 10

Current behavior: not support ie 11, arrow function not converted.

babel config file

const presets = [
  [
    "@babel/preset-env",
    {
        debug: true,
        // "exclude": ["@babel/plugin-transform-regenerator"],
      targets: "ie 11",
      //     {
      //   // edge: "79",
      //   // chrome: "67",
      //   ie: "11",
      // },
      //useBuiltIns: "usage",
      useBuiltIns: "entry",
      corejs: "3.6.4",
    },
  ],
];

module.exports = { 
    presets,
    minified: isProduction,
    sourceMaps: isProduction? false: "inline",
    plugins:[ ],
};

Expected/desired behavior:

support ie 11, convert arrow function like this

export function getObjectDiff(obj1, obj2) {
    const diff = Object.keys(obj1).reduce((result, key) => {
        if (!obj2.hasOwnProperty(key)) {
            result.push(key);
        } else if (_.isEqual(obj1[key], obj2[key])) {
            const resultKeyIndex = result.indexOf(key);
            result.splice(resultKeyIndex, 1);
        }
        return result;
    }, Object.keys(obj2));

    return diff;
}

[scil]

I have found the sollution is to skip automaticly merging babel.config.js .

I merge it mannuly, like this

const configFromBabel = require('./babel.config')
const babelLoaderOptions= {
...configFromBabel,
    only: null, // overwrite configFromBabel from babel.config.js
    babelrc:false,
    configFile:false,
}



            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: babelLoaderOptions, 
                    // options: {
                    //     babelrc:false,
                    //     configFile:false,
                    //     presets: [
                    //         ['@babel/preset-env', { targets: "ie 11" }]
                    //     ]
                    // }
                }
            },

what do u think?

[wang1212]

I have found the sollution is to skip automaticly merging babel.config.js .

I merge it mannuly, like this

const configFromBabel = require('./babel.config')
const babelLoaderOptions= {
...configFromBabel,
    only: null, // overwrite configFromBabel from babel.config.js
    babelrc:false,
    configFile:false,
}



            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: babelLoaderOptions, 
                    // options: {
                    //     babelrc:false,
                    //     configFile:false,
                    //     presets: [
                    //         ['@babel/preset-env', { targets: "ie 11" }]
                    //     ]
                    // }
                }
            },

what do u think?

@scil I have the same problem.

My project root directory has a .babelrc.js configuration file. I adopted your solution. However, I only need to configure babelrc: false additionally, and do not need the configFile and only options.

In addition, I think this is a long-standing problem, you can take a look: https://github.com/babel/babel-loader/issues/823 .

[scil]

I have found the sollution is to skip automaticly merging babel.config.js . I merge it mannuly, like this

const configFromBabel = require('./babel.config')
const babelLoaderOptions= {
...configFromBabel,
    only: null, // overwrite configFromBabel from babel.config.js
    babelrc:false,
    configFile:false,
}



            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: babelLoaderOptions, 
                    // options: {
                    //     babelrc:false,
                    //     configFile:false,
                    //     presets: [
                    //         ['@babel/preset-env', { targets: "ie 11" }]
                    //     ]
                    // }
                }
            },

what do u think?

@scil I have the same problem.

My project root directory has a .babelrc.js configuration file. I adopted your solution. However, I only need to configure babelrc: false additionally, and do not need the configFile and only options.

In addition, I think this is a long-standing problem, you can take a look: #823 .

Thank you. I use both of babelrc:false and configFile just for precausion.

I use only because my webpack and babel compile dif files.

[JLHwung]

convert arrow function like this

Can you print the effective Babel config applied to this file?

https://babeljs.io/docs/en/configuration#print-effective-configs

[scil]

convert arrow function like this

Can you print the effective Babel config applied to this file?

https://babeljs.io/docs/en/configuration#print-effective-configs

I'd like to , but my env not support command npm start :(

PS>$env:BABEL_SHOW_CONFIG_FOR = ".\src\myComponent.jsx"; npm start
npm ERR! Missing script: "start"
npm ERR!
npm ERR! Did you mean one of these?
npm ERR!     npm star # Mark your favorite packages
npm ERR!     npm stars # View packages marked as favorites
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\A\node\node-cache\_logs\2022-01-13T16_51_05_329Z-debug-0.log