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

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;
}

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 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 .

@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.

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

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

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

scil commented on Jan 5, 2022

wang1212 commented on Jan 7, 2022

scil commented on Jan 9, 2022

JLHwung commented on Jan 13, 2022

scil commented on Jan 13, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions