Webpack Multiple presets with babel loader along with key value pair

Question

---

have a question in mind while working, i found it difficult to configure preset for babel loader do have a look and let me know what needs to be done in order to fix it. i am not about to write the whole webpack file just part of it where i found the problem. any help will greatly appreciated

 module: {
rules: [{
    test: /\.js?$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          ['@babel/preset-env', {
            loose: true,
            modules: 'commonjs'
          }, 'es2015', 'react'],
        ],
        plugins: ['transform-es2015-template-literals'],
      },
    },
    include: new RegExp('/node_modules\/(' +
      '|acorn-jsx' +
      '|d3-array' +
      '|debug' +
      '|newspack-components' +
      '|regexpu-core' +
      '|unicode-match-property-ecmascript' +
      '|unicode-match-property-value-ecmascript)/'
    ),
  }]

Answer 1

You put es2015 and react presets in wrong place (in definition of '@babel/preset-env' preset).

It should be:

presets: [
    [
        '@babel/preset-env',
        {
            loose: true,
            modules: 'commonjs'
        },
    ],
    'es2015',
    'react'
],