What babel plugins need to be connected to work with react-dnd?

Question

React

I want to attach react-dnd to my project, but it turned out to be not so easy. I'm getting a strange error

vm.js:83 Uncaught /my-project-path/node_modules/react-dnd-html5-backend/dist/esm/index.js:1
(function (exports, require, module, __filename, __dirname, process, global, Buffer) { return function (exports, require, module, __filename, __dirname) { import HTML5Backend from './HTML5Backend';
                                                                                                                                                                  ^^^^^^^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:83:7)
    at createScript (vm.js:265:10)
    at Object.runInThisContext (vm.js:313:10)
    at Module._compile (internal/modules/cjs/loader.js:712:26)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:798:10)
    at Module.load (internal/modules/cjs/loader.js:645:32)
    at Function.Module._load (internal/modules/cjs/loader.js:560:12)
    at Module.require (internal/modules/cjs/loader.js:685:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.react-dnd-html5-backend (http://localhost:1212/dist/renderer.dev.js:29536:18)

And specifically, it is very strange for me to compile the code:

(function (exports, require, module, __filename, __dirname, process, global, Buffer) { return function (exports, require, module, __filename, __dirname) { import HTML5Backend from './HTML5Backend';
import * as NativeTypes from './NativeTypes';
export { getEmptyImage } from './getEmptyImage';
export { NativeTypes };

var createHTML5Backend = function createHTML5Backend(manager, context) {
  return new HTML5Backend(manager, context);
};

export default createHTML5Backend;
}.call(this, exports, require, module, __filename, __dirname); });

I think it's a problem with babel, but who the hell knows. Maybe someone else has experienced this as well?
babel:

/* eslint global-require: off */

const developmentEnvironments = ['development', 'test'];

const developmentPlugins = [require('react-hot-loader/babel')];

const productionPlugins = [
    require('babel-plugin-dev-expression'),

    // babel-preset-react-optimize
    require('@babel/plugin-transform-react-constant-elements'),
    require('@babel/plugin-transform-react-inline-elements'),
    require('babel-plugin-transform-react-remove-prop-types'),
];

module.exports = api => {
    // see docs about api at https://babeljs.io/docs/en/config-files#apicache

    const development = api.env(developmentEnvironments);

    return {
        presets: [
            [
                require('@babel/preset-env'),
                {
                    targets: { electron: require('electron/package.json').version },
                    useBuiltIns: 'usage',
                    corejs: '3',
                },
            ],
            [require('@babel/preset-react'), { development }],
        ],
        plugins: [
            // Stage 0
            require('@babel/plugin-proposal-function-bind'),

            // Stage 1
            require('@babel/plugin-proposal-export-default-from'),
            require('@babel/plugin-proposal-logical-assignment-operators'),
            [require('@babel/plugin-proposal-optional-chaining'), { loose: false }],
            [
                require('@babel/plugin-proposal-pipeline-operator'),
                { proposal: 'minimal' },
            ],
            [
                require('@babel/plugin-proposal-nullish-coalescing-operator'),
                { loose: false },
            ],
            require('@babel/plugin-proposal-do-expressions'),

            // Stage 2
            [require('@babel/plugin-proposal-decorators'), { legacy: true }],
            require('@babel/plugin-proposal-function-sent'),
            require('@babel/plugin-proposal-export-namespace-from'),
            require('@babel/plugin-proposal-numeric-separator'),
            require('@babel/plugin-proposal-throw-expressions'),

            // Stage 3
            require('@babel/plugin-syntax-dynamic-import'),
            require('@babel/plugin-syntax-import-meta'),
            [require('@babel/plugin-proposal-class-properties'), { loose: true }],
            require('@babel/plugin-proposal-json-strings'),

            ...(development ? developmentPlugins : productionPlugins),
        ],
    };
};

webpack:

export default merge.smart(baseConfig, {
    devtool: 'inline-source-map',
    mode: 'development',
    target: 'electron-renderer',
    entry: [
        'react-hot-loader/patch',
        `webpack-dev-server/client?http://localhost:${port}/`,
        'webpack/hot/only-dev-server',
        require.resolve('../app/index'),
    ],
    output: {
        publicPath: `http://localhost:${port}/dist/`,
        filename: 'renderer.dev.js',
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                    },
                },
            },
            {
                test: /\.global\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /^((?!\.global).)*\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            sourceMap: true,
                            importLoaders: 1,
                            //localIdentName: '[name]__[local]__[hash:base64:5]'
                        },
                    },
                ],
            },
            {
                test: /\.global\.(scss|sass)$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'sass-loader',
                    },
                ],
            },
            {
                test: /^((?!\.global).)*\.(scss|sass)$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: false,
                            sourceMap: true,
                            importLoaders: 1,
                        },
                    },
                    {
                        loader: 'sass-loader',
                    },
                ],
            },
            {
                test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        mimetype: 'application/font-woff',
                    },
                },
            },
            {
                test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        mimetype: 'application/font-woff',
                    },
                },
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        mimetype: 'application/octet-stream',
                    },
                },
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                use: 'file-loader',
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        mimetype: 'image/svg+xml',
                    },
                },
            },
            {
                test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
                use: 'url-loader',
            },
        ],
    },

    plugins: [
        requiredByDLLConfig
            ? null
            : new webpack.DllReferencePlugin({
                context: path.join(__dirname, '..', 'dll'),
                manifest: require(manifest),
                sourceType: 'var',
            }),

        new webpack.HotModuleReplacementPlugin({
            multiStep: true,
        }),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.EnvironmentPlugin({
            NODE_ENV: 'development',
        }),
        new webpack.LoaderOptionsPlugin({
            debug: true,
        }),
    ],

    node: {
        __dirname: false,
        __filename: false,
    },
});