Can't resolve @babel/runtime/helpers/esm

[agentmilindu]

I'm using the react-window ^1.8.6 version ( under my dependencies). When I try to yarn build my project, I'm getting the following errors.

ERROR in ./node_modules/react-window/dist/index.esm.js Module not found: Error: Can't resolve '@babel/runtime/helpers/esm/assertThisInitialized' in '/Users/xxxxxx/Workspace/xxxxx/component-library/node_modules/react-window/dist' @ ./node_modules/react-window/dist/index.esm.js 3:0-86 160:60-82 160:83-105 164:18-40 164:41-63 1066:60-82 1066:83-105 1070:18-40 1070:41-63 @ ./src/components/PDFViewer/Viewer.tsx @ ./src/components/PDFViewer/PDFViewer.tsx @ ./src/components/PDFViewer/index.ts @ ./src/components/DocumentViewer/DocumentViewer.tsx @ ./src/components/DocumentViewer/index.ts @ ./src/index.ts

Full set as below

yarn version 1.22.17 npm version 8.1.2 node version v16.13.2 webpack version ^4.44.1

My Webpack cofig looks like

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.ts',
    mode: 'production',
    output: {
        path: path.resolve(__dirname, 'lib'),
        filename: 'the-component-library.js',
        libraryTarget: 'umd',
        globalObject: 'this',
        library: 'theComponentLibrary',
    },
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: ['ts-loader'],
            },
            {
                test: /\.(scss|css)$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.svg$/,
                use: ['@svgr/webpack'],
            },
            {
                test: /\.(gif)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    },
                ],
            },
        ],
    },
    externals: [
        {
            react: 'react',
        },
        '@material-ui/core',
        '@material-ui/lab',
        /@material-ui\/core\/*./,
        /@material-ui\/lab\/*./,
        'react-simple-gestures',
        'react-dropzone',
    ],
    resolve: {
        extensions: ['.ts', '.tsx'],
    },
    plugins: [
        // Ignore all locale files of day.js
        new webpack.IgnorePlugin(/^\.\/locale$/),
    ],
};

How can I resolve this issue?

[agentmilindu]

Oh, I could resolve the issue by changing the Webpack config as below.

resolve: {
-       extensions: ['.ts', '.tsx'],
+       extensions: ['.js', '.ts', '.tsx'],
},