Can't use Redux in React panel plugin

Grafana Plugin Development
1

Hi,

I’m developing a React-based panel plugin using webpack (based on grafana-plugin-template-webpack). The React part works, however if I try to include react-redux into the plugin I get the following error message:

Uncaught (in promise) Error: Unable to dynamically transpile ES module
A loader plugin needs to be configured via `SystemJS.config({ transpiler: 'transpiler-module' })`.

The following code causes the issue:

import {connect} from 'react-redux'

Webpack config:

module.exports = {
  target: 'node',
  context: resolve('src'),
  entry: './module.js',
  output: {
    filename: "module.js",
    path: resolve('dist'),
    libraryTarget: "amd"
  },
  externals: [
    'jquery',
    'lodash',
    'moment',
    function (context, request, callback) {
      var prefix = 'grafana/';
      if (request.indexOf(prefix) === 0) {
        return callback(null, request.substr(prefix.length));
      }
      callback();
    }
  ],
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("production")
      }
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new CopyWebpackPlugin([
      { from: 'plugin.json' },
      { from: 'partials/*' }
    ])
  ],
  resolve: {
    alias: {
      'src': resolve('src')
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(external)/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react"
            ].map(require.resolve),
          }
        }
      }
    ]
  }
}

Can anybody give me a hint what I’m doing wrong?