Webpack 4 + Babel 7 transform-runtime - Invalid configuration object

Question

I'm currently using webpack 4 with babel 7 which was just released not long ago. Whenever I'm trying to run the latest webpack with babel on my project, I'm getting the following error currently with the plugin @babel/plugin-transform-runtime:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match
the API schema.
 - configuration.plugins[0] should be one of these:
   object { apply, … } | function
   -> Plugin of type object or instanceof Function
   Details:
    * configuration.plugins[0] should be an object.
      -> Plugin instance
    * configuration.plugins[0] should be an instance of function
      -> Function acting as plugin
 - configuration.plugins[1] should be one of these:
   object { apply, … } | function
   -> Plugin of type object or instanceof Function
   Details:
    * configuration.plugins[1] misses the property 'apply'.
      function
      -> The run point of the plugin, required method.
    * configuration.plugins[1] misses the property 'apply'.
      function
      -> The run point of the plugin, required method.
    * configuration.plugins[1] should be an instance of function
      -> Function acting as plugin

According to the documentation in https://babeljs.io/docs/en/babel-plugin-transform-runtime/, this should be working with the following example configuration for a .babelrc as an example (modifying this in my webpack.config.js to just turn corejs to true)

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": false,
      "helpers": true,
      "regenerator": true,
      "useESModules": false
    }]
  ]
}

webpack.config.js

var webpack = require('webpack');
var fiber = require('fibers');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: [
        '@babel/polyfill',
        './src/jsx/app'
    ],
    output: {
        filename: 'bundle.js',
        path: __dirname + '/dist'
    },
    mode: 'development',
    devtool: 'source-map',
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'main',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true
                }
            }
        }
    },
    module: {
        rules: [
            {
                test: /\.(jsx|js)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            {
                                'useBuiltIns': 'entry',
                                'modules': 'false'
                            },
                            '@babel/preset-env',
                            '@babel/preset-react'
                        ],
                        plugins: [
                            require('@babel/plugin-syntax-dynamic-import'),
                            require('@babel/plugin-proposal-object-rest-spread')
                        ]
                    }
                }
            },
            {
                test: /\.(scss|css)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: this.mode === 'development' ? MiniCssExtractPlugin.loader : 'style-loader',
                    },  {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    }, {
                        loader: 'resolve-url-loader',
                        options: {
                            sourceMap: true,
                            keepQuery: true,
                            debug: this.mode === 'development'
                        }
                    }, {
                        loader: 'sass-loader',
                        options: {
                            outFile: 'src/style.css',
                            implementation: require('dart-sass'),
                            fiber: fiber,
                            sourceMap: true,
                            sourceComments: true,
                            sourceMapContents: true,
                            outputStyle: 'compressed',
                            includePaths: [
                                'node_modules/@fortawesome/fontawesome-pro/scss',
                                'node_modules/foundation-sites/scss',
                                'node_modules/motion-ui/src',
                                'node_modules/react-dates',
                                'node_modules/slick-carousel/slick',
                                'src/scss'
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        '@babel/plugin-transform-runtime', {
            'corejs': true
        },
        new MiniCssExtractPlugin({
            filename: this.mode === 'development' ? '[name].css' : '[name].[hash].css',
            chunkFilename: this.mode === 'development' ? '[id].css' : '[id].[hash].css',
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: './dist',
        hot: true
    }
};

dependencies from package.json

"devDependencies": {
    "@babel/core": "7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "7.0.0",
    "@babel/plugin-syntax-dynamic-import": "7.0.0",
    "@babel/plugin-transform-runtime": "7.0.0",
    "@babel/preset-env": "7.0.0",
    "@babel/preset-react": "7.0.0",
    "@babel/register": "7.0.0",
    "babel-loader": "8.0.2",
    "dart-sass": "1.13.1",
    "electron": "2.0.8",
    "electron-packager": "12.1.1",
    "eslint": "5.4.0",
    "eslint-plugin-react": "7.11.1",
    "mini-css-extract-plugin": "0.4.2",
    "react-hot-loader": "4.3.5",
    "resolve-url-loader": "2.3.0",
    "upath": "1.1.0",
    "webpack": "4.17.2",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "3.1.7"
},
"dependencies": {
    "@babel/polyfill": "7.0.0",
    "@babel/runtime-corejs2": "7.0.0",
    "@fortawesome/fontawesome-pro": "latest",
    "chalk": "2.4.1",
    "cheerio": "1.0.0-rc.2",
    "colors": "1.3.2",
    "fibers": "3.0.0",
    "foundation-sites": "6.5.0-rc.2",
    "jquery": "3.3.1",
    "moment": "2.22.2",
    "motion-ui": "2.0.3",
    "react": "16.4.2",
    "react-dates": "17.2.0",
    "react-dom": "16.4.2",
    "react-slick": "0.23.1",
    "slick-carousel": "1.8.1",
    "schema-utils": "1.0.0",
    "what-input": "5.1.1"
}

Answer 1

Found the answer to those who are new to babel and webpack configuration such as me making this mistake:

webpack.config.js does NOT replace .babelrc and will need to be moved over for babel plugins such as the ones below in my .babelrc:

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
        ["@babel/plugin-transform-runtime", {
            "corejs": 2
        }]
    ]
}