How can Include both commonJs require syntax and es modules import syntax in the same bundle - webpack

Question

before tagging as a duplicate, I searched for an answer before I asked and I found this one: Is it possible to use both "require" and "import" together with Webpack?

The problem is that the accepted answer directs to the webpack documentation which has different content now.

The issue:

I have a project with Webpack version 4.41.2, React as a front and approximately 600 js/jsx files all written with the old require and module.exports syntax and I want to update them to the import/export syntax (not all of them at one time because this will take forever). When I try to update even one simple file like this:

From this-

const React = require('react');

const Spinner = () => {
    return (
        <div className="vertical-align" style={{ "width": "100%", "height": "100%" }}>
            <div className="lds-ring">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    );
};

module.exports = Spinner;

To this-

import React from 'react';

const Spinner = () => {
    return (
        <div className="vertical-align" style={{ "width": "100%", "height": "100%" }}>
            <div className="lds-ring">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    );
};

export default Spinner;

The app gets crashed and It gives me the following errors:

ContactList is the component that renders the Spinner component.

My webpack.config.js looks like this:

"use strict";
var WebpackNotifierPlugin = require('webpack-notifier');
var webpack = require('webpack');
var path = require('path');

module.exports = [
    {
        mode: 'development',
        context: __dirname + "/app",
        entry: {
            'app': ["./main.jsx"],
            'widget': ["./Widget/Widget.jsx"],
            'admin': ["./Admin/Main.jsx"],
            'dashboard': ["./Dashboard/Main.jsx"],
            'signin': ["./SignIn/Main.jsx"],
            'surveys': ["./Surveys/Main.jsx"]
        },
        output: {
            filename: "[name].entry.js",
            path: __dirname + "/dist",
            publicPath: '/'
        },
        devtool: "eval-source-map",
        devServer: {
            hot: true,
            contentBase: './dist',
            host: "localhost",
            inline: true,
            port: 58852
        },
        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    use: ['babel-loader'],
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/i,
                    use: ['style-loader', 'css-loader']
                }
            ]
        },
        plugins: [
            new WebpackNotifierPlugin(),
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
        ],
        performance: {
            maxEntrypointSize: 10000000,
            maxAssetSize: 10000000
        }
    }
]

I will be extremely thankful for any suggestion of how can I solve this problem.

Answer 1

It's how the latest babel works when transpiling es module to commonjs.

Take this code for example:

const Spinner = () => {
    return (
        <div></div>
    );
};

export default Spinner;

Babel will transpile it into:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var Spinner = function Spinner() {
  return /*#__PURE__*/React.createElement("div", null);
};

var _default = Spinner;
exports.default = _default;

As you can see from the transpiled code above, there's no module.exports, only exports.default, that means you have to use const {default: Spinner} = require('./path/to/Spinner') instead of const Spinner = require('./path/to/Spinner').

But sure you can work around it with help of https://www.npmjs.com/package/babel-plugin-add-module-exports.