Webpack 5 bundle.js doesn't include all the src content - reactjs

Question

After I removed "dist" folder and re-build the project using webpack it starts producing 0 bytes bundle.js
Here is webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.tsx',
devtool: 'source-map',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
module: {
rules: [
{ test: /\.svg$|/i, use: 'raw-loader' },
{ test: /\.tsx?$/i, use: [{ loader: 'ts-loader', options: { transpileOnly: true } }], exclude: /node_modules/, },
{ test: /\.css$/i, use: ['style-loader', 'css-loader'] },
{ test: /\.s[ac]ss$/i, use: ["style-loader", "css-loader", "sass-loader"] },
],
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
hot: true,
port: 9000,
},
plugins: [new HtmlWebpackPlugin()],
};
Here is 'index.tsx':
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import "antd/dist/antd.css";
const root = document.createElement('div');
root.setAttribute('id', 'root');
document.body.appendChild(root);
const MyApp = () => (
<React.Fragment>
<App />
</React.Fragment>
);
ReactDOM.render(<MyApp />, document.getElementById('root'));
Here is package.json scripts:
"scripts": {
"start": "node node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress",
"build": "node node_modules/webpack/bin/webpack.js -p --progress --color"
},
Here are dependencies:
"devDependencies": {
"#types/react-virtualized": "^9.21.11",
"#types/react-window": "^1.8.3",
"#webpack-cli/serve": "^1.5.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"less": "^4.1.1",
"less-loader": "^10.0.1",
"mobx-react-devtools": "^6.1.1",
"raw-loader": "^4.0.2",
"sass": "^1.35.1",
"sass-loader": "^12.1.0",
"ts-loader": "^9.2.3",
"webpack": "^5.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
}
As a result when I run 'npm run build' I'm getting:
PS D:\coding\video-demo> npm run build
> video-demo#0.1.0 build D:\coding\video-demo
> node node_modules/webpack/bin/webpack.js -p --progress --color
asset index.html 243 bytes [emitted]
asset bundle.js 0 bytes [emitted] [minimized] (name: main)
./src/index.tsx 504 bytes [built] [code generated]
webpack 5.44.0 compiled successfully in 669 ms
bundle.js is 0 bytes.
What might happen that now cause issues with building bundle.js?
EDIT: after changing webpack-cli version to 4.7.2 (latest) and modifying build script to just "webpack" I was able to get bundle.js with some code inside. However, there is the only index.tsx content inside bundle.js. It seems that wepback can't build the graph of imports. Does anyone aware of why it might happen? Maybe something wrong in tsconfig.json.
tsconfig.json
{
"compilerOptions": {
"experimentalDecorators": true,
"module": "esnext",
"target": "es5",
"jsx": "react-jsx",
"sourceMap": true,
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": true,
"strict": false,
"moduleResolution": "node",
"resolveJsonModule": true
},
"include": [
"src"
],
}

Answer 1

Finally, after hours of applying different configurations, I was able to make it work with webpack 5. Not sure what exactly was the issue, seems it was some kind of combination of different things, from different configs.
I replaced ts-loader with babel and changed tsconfig.json to:
{
"compilerOptions": {
"experimentalDecorators": true,
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"esModuleInterop": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": ["src"]
}