Deoptimised the styling of undefined as it exceeds the max of 500KB. [Babel]

Question

I'm getting the following when compiling for production, development or watch:

[BABEL] Note: The code generator has deoptimised the styling of undefined as it exceeds the max of 500KB.

It puts the message 3 times before actually completing the compiling process. I'm not sure how to resolve this issue, has anybody resolved this issue before?

My webpack.mix.js file:

const mix = require('laravel-mix');
const oldMix = require('laravel-mix');
const path = require('path');
const glob = require('glob');
const PurgeCSSPlugin = require('purgecss-webpack-plugin');

//-- Website Mix --
mix.babelConfig({
   plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-optional-chaining'],
});

mix.webpackConfig({
    watchOptions: {
        ignored: /node_modules/
    },
    stats: {
        warnings: false,
    },
    output: {
        chunkFilename: 'website/js/chunks/[chunkhash].js',//replace with your path
    },
    resolve: {
        alias: {
            '@fonts': path.resolve(__dirname, 'resources/website/styles/fonts'),
            '@images': path.resolve(__dirname, 'resources/website/images')
        }
    },
    plugins: [
        new PurgeCSSPlugin({
            paths: glob.sync('website/*',  { nodir: true }),
        })
    ]
});

mix.options({
    postCss: [
        require('autoprefixer'),
    ],
    fileLoaderDirs:  {
        fonts: 'website/fonts',
        images: 'website/images'
    }
});

mix.js('resources/website/index.js', 'public/website/js').react();
mix.version();
//-- Website Mix End --

//-- Old Application and Dashboard --
oldMix.webpackConfig({
    watchOptions: {
        ignored: /node_modules/
    }
});

oldMix.babel([
    'public/old/Scripts/Core/Primitive/jQuery.js',
    'public/old/Scripts/Core/Primitive/Slick.js',
    'public/old/Scripts/Core/Primitive/Angular.js',
    'public/old/Scripts/Core/Primitive/Bootstrap.js',
    'public/old/Scripts/Core/Primitive/Masonry.js',
    'public/old/Scripts/Core/Primitive/Images.js',
    'public/old/Scripts/Core/Primitive/Moment.js',
    'public/old/Scripts/Core/Primitive/Date.js',
    'public/old/Scripts/Core/Primitive/UTM.js',
    'public/old/Scripts/Dashboard/Tinymce/TinyMCE.js',
    'public/old/Scripts/Core/Primitive/Pusher.js',
    'public/old/Scripts/Core/Primitive/Reviews.js',
    'public/old/Scripts/Core/Primitive/Fancybox.js',
    'public/old/Scripts/Core/Primitive/Confetti.js',
    'public/old/Scripts/Core/Primitive/Signature.js',
], 'public/old/Build/Scripts/Primitive.js');

oldMix.babel([
    'public/old/Scripts/Core/Angular/*.js',
    'public/old/Scripts/Dashboard/Tinymce/UITinyMCE.js'
], 'public/old/Build/Scripts/Directives.js');

oldMix.babel([
    'public/old/Scripts/Dashboard/UI.js',
    'public/old/Scripts/Dashboard/Modules/OriginFactories.js',
    'public/old/Scripts/Dashboard/Modules/AddonsControllers.js',
    'public/old/Scripts/Dashboard/Modules/ProductsControllers.js',
    'public/old/Scripts/Dashboard/Modules/BoilerAdviceControllers.js',
    'public/old/Scripts/Dashboard/Controllers.js',
    'public/old/Scripts/Dashboard/Routes.js',
], 'public/old/Build/Scripts/Dashboard.js');

oldMix.babel([
    'public/old/Scripts/Application/UI.js',
    'public/old/Scripts/Application/Controllers.js',
    'public/old/Scripts/Application/Routes.js',
], 'public/old/Build/Scripts/Application.js');


oldMix.babel([
    'public/old/Scripts/Heatable.js'
], "public/old/Build/App.js");

oldMix.styles(['public/old/Styles/*.css'], 'public/old/Build/Styles/Core.css');
oldMix.styles(['public/old/Styles/Home/*.css'], 'public/old/Build/Styles/Home.css');
oldMix.styles(['public/old/Styles/Dashboard/*.css'], 'public/old/Build/Styles/Dashboard.css');
oldMix.styles(['public/old/Styles/Application/*.css'], 'public/old/Build/Styles/Application.css');
oldMix.version();
//-- Old Application and Dashboard End --