[Solved]-Importing React as default module not working inside Symfony Webpack Encore project-Reactjs

In our case we have in compiler options "esModuleInterop": true, so we have something like this:

{
    "ecmaVersion": 2021,
    "sourceType": "module",
    "compilerOptions": {
        "noImplicitAny": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "jsx": "react"
    },
    "include": [
        "assets/js/**/*.ts",
        "assets/js/**/*.tsx",
        "assets/js/**/*.js",
        "assets/js/**/*.jsx",
        "templates/**/*.ts",
        "templates/**/*.tsx",
        "templates/**/*.js",
        "templates/**/*.jsx"
    ],
    "exclude": [
        "node_modules",
        "public",
        "vendor"
    ]
}

We have a more complex webpackconfig be we use the same options regarding React:

const Encore = require('@symfony/webpack-encore');
const path = require('path');
const ESLintPlugin = require('eslint-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const {
    bundlesScssPath,
    bundlesJsPath,
    templatesPath
} = require('./webpack/configs/utils.config');
const vendorsAddEntries = require('./webpack/configs/vendors-add-entries.config');
const projectAddEntries = require('./webpack/configs/project-add-entries.config');
const coreVendorsAddEntries = require('./webpack/configs/core-vendors-add-entries.config');
const designStoryAddEntries = require('./webpack/configs/design-story-add-entries.config');
const cssAddEntries = require('./webpack/configs/css-add-entries.config');

vendorsAddEntries();
coreVendorsAddEntries();
projectAddEntries();
designStoryAddEntries();
cssAddEntries();

// +-------------+
// | Main config |
// +-------------+
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.scss) if you JavaScript imports CSS.
     */
    // +-------------------+
    // | common js entries |
    // +-------------------+
    // .addEntry('app', './assets/js/app.ts')
    .addEntry('vendors', path.resolve('./' + path.join(bundlesJsPath, 'vendors/index.ts')))
    .addEntry('components', path.resolve('./' + path.join(templatesPath, 'DesignStory/components/components.ts')))

    // +---------------+
    // | configuration |
    // +---------------+
    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css) and assets cache issues on production
    .enableVersioning(Encore.isProduction())

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    // enables @babel/preset-env polyfills
    .configureBabel(() => {}, {
        useBuiltIns: 'usage',
        corejs: 3
    })
    // +------------+
    // | TS + React |
    // +------------+
    // uncomment if you use API Platform Admin (composer req api-admin)
    .enableReactPreset()
    .enableTypeScriptLoader((tsConfig) => {
        // You can use this callback function to adjust ts-loader settings
        // https://github.com/TypeStrong/ts-loader/blob/master/README.md#loader-options
        // For example:
        // tsConfig.silent = false
    })
    // optionally enable forked type script for faster builds
    // https://www.npmjs.com/package/fork-ts-checker-webpack-plugin
    // requires that you have a tsconfig.json file that is setup correctly.
    .enableForkedTypeScriptTypesChecking(options => {
        delete options.parser;
    })
    .addPlugin(new ESLintPlugin({
        extensions: ['js', 'jsx', 'ts', 'tsx'],
        exclude: [
            'node_modules',
            'vendor'
        ],
    }))
    .addPlugin(new StyleLintPlugin({
        context: path.resolve(__dirname),
        configFile: '.stylelintrc.json',
        files: [
            path.join(bundlesScssPath, '**/*.s+(a|c)ss'),
            path.join(templatesPath, '**/*.s+(a|c)ss')
        ]
    }))

    // +-----------------+
    // | SASS/postprefix |
    // +-----------------+
    // enables Sass/SCSS support
    .enableSassLoader((options) => {
            // add or set custom options
            // options.includePaths: ["absolute/path/a", "absolute/path/b"];
            // options.warnRuleAsWarning = true;
        }, {}
    )
    // Convert fonts to base64 inline (avoid font loading issue on pdf to html generation with wkhtml2pdf)
    .addLoader({
        test: /\.(ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        use: ['base64-inline-loader'],
        type: 'javascript/auto',
    })
    // enable autoprefixing for css
    .enablePostCssLoader((options) => {
        options.postcssOptions = {
            // the directory where the postcss.config.js file is stored
            config: path.resolve(__dirname, 'postcss.config.js')
        };
    })

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes()
    .addExternals(
        {
            'bazinga-translator': 'Translator'
        }
    )
    // uncomment if you're having problems with a jQuery plugin
    .autoProvidejQuery()
    // you can use this method to provide other common global variables,
    // such as '_' for the 'underscore' library
    // .autoProvideVariables({
    //     $: 'jquery',
    //     jQuery: 'jquery',
    //     'window.jQuery': 'jquery',
    // })

    .copyFiles({
        from: './assets/images',
        to: 'images/[path][name].[ext]',
        pattern: /\.(png|jpg|jpeg|svg|ico|gif)$/
    })

    // +-------------+
    // | performance |
    // +-------------+
    // A simple technique to improve the performance of web applications is to reduce
    // the number of HTTP requests inlining small files as base64 encoded URLs in the
    // generated CSS files.
    .configureImageRule({
        // tell Webpack it should consider inlining
        type: 'asset',
        //maxSize: 4 * 1024, // 4 kb - the default is 8kb
    })
    // same here
    .configureFontRule({
        type: 'asset',
        //maxSize: 4 * 1024
    })
;

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

module.exports = Encore.getWebpackConfig();

Hopes it will help