I have a project that I was using with plain JS, built with rekit. I got tired of using JSDoc to specify the types, and I wanted to use typescript instead. I converted the entire codebase to TS using ts-migrate, but I am having serious problems with webpack. The project seems to compile just fine, no errors on webpack side, and If I turn on performance hints it tells me that the size of some assets is too big, just like before. However, when I open the page on the browser, it still downloads the bundle, but it is not executed. I can't understand what is wrong, if it is the TS configuration, webpack configuration or just the dev server. Below there are the two relevant files, a common file for shared configs between dev and prod, and the dev file. The webpack dev server and everything was working before, it is just after the migration to TS that fails. If you prefer to see the changes in context, here is the pull request where I am doing the migration
Here is the common file:
const extensions = ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx', 'ts', 'tsx'];
const rules = [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
},
},
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
];
module.exports = {
extensions,
rules,
};
And here is the webpack dev config:
const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');
const { extensions, rules } = require('./webpack.common');
const publicPath = '/';
const publicUrl = '';
const env = getClientEnvironment(publicUrl);
module.exports = {
mode: 'development',
devtool: 'cheap-module-source-map',
entry: [
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appIndexJs,
paths.appIndexStyle,
],
output: {
pathinfo: true,
filename: 'static/js/bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
resolve: {
modules: ['node_modules', paths.appNodeModules].concat(
process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
),
extensions,
plugins: [
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
new TsconfigPathsPlugin({ logLevel: 'info', extensions }),
],
},
module: {
strictExportPresence: true,
rules: [
...rules,
{
oneOf: [
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
test: /\.less$/,
loader: 'style-loader!css-loader?sourceMap!less-loader?sourceMap',
},
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
loader: require.resolve('file-loader'),
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new webpack.EnvironmentPlugin(env.raw),
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
env: env.raw,
}),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
performance: {
hints: false,
},
};
As you can see on this screenshot, there is no error on the console and the bundle is correctly being downloaded:
If I run a production build, all it "bundles" are the style loader and the webpack runtime. Here is the result of the webpack bundle analyzer:

