Как настроить webpack для работы с require на клиенте?

Question

[Juniorrrrr]

Подскажите есть проект на реакте, необходимо в одном из мест использовать require вместо import, но на клиенте require нет.

Как можно обойти эту проблему ? Чтобы можно было написать вместоimport RadarChart from "components/Radar";

так const RadarChart = require("components/Radar");

webpack.config

const path = require('path');
const Html = require('html-webpack-plugin');
const { CleanWebpackPlugin: Clean } = require('clean-webpack-plugin');
const Copy = require('copy-webpack-plugin');

const MomentLocales = require('moment-locales-webpack-plugin');

module.exports = {
  entry: {
    editor: './src/editor.entrypoint.js',
    public: './src/public.entrypoint.js',
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/i,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpg|jpeg|gif|woff|eot|ttf|otf)$/i,
        loader: 'file-loader',
        options: {
          outputPath: 'assets',
        },
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
    alias: {
      clearText: path.resolve(__dirname, 'src/clearText.js'),
      components: path.resolve(__dirname, 'src/components/'),
      connectors: path.resolve(__dirname, 'src/connectors/'),
      containers: path.resolve(__dirname, 'src/containers/'),
      contexts: path.resolve(__dirname, 'src/contexts/'),
      fonts: path.resolve(__dirname, 'src/fonts/'),
      helpers: path.resolve(__dirname, 'src/helpers.js'),
      hooks: path.resolve(__dirname, 'src/hooks/'),
      mock: path.resolve(__dirname, 'src/mock/'),
      img: path.resolve(__dirname, 'src/img/'),
      pages: path.resolve(__dirname, 'src/pages/'),
      utils: path.resolve(__dirname, 'src/utils/'),
      slice: path.resolve(__dirname, 'src/slice/'),
      colors: path.resolve(__dirname, 'src/colors/'),
      reusedStyles: path.resolve(__dirname, 'src/reusedStyles/'),
      media: path.resolve(__dirname, 'src/media/'),
      commonHelpers: path.resolve(__dirname, 'src/commonHelpers/'),
    },
  },
  plugins: [
    new MomentLocales(),
    new Clean(),
    new Copy([{ from: 'public', to: '.' }]),
    new Html({
      chunks: ['public'],
      hash: true,
      scriptLoading: 'defer',
      template: 'public/index.html',
    }),
    // new BundleAnalyzer(),
  ],
  devServer: {
    disableHostCheck: true,
    historyApiFallback: true,
    overlay: {
      warnings: true,
      errors: true,
    },
    port: 3000,
    proxy: {
      '/api': {
        target: '----',
        secure: false,
        changeOrigin: true,
      },
    },
  },
};