React with webpack cannot find tsx component dependency - reactjs

Question

I am adding Typescript support to an older React application. It was not created with create-react-app. I've installed typescript and ts-loader. I added a tsconfig file which allows js files. And I updated the webpack.config.json file to use ts-loader to handle ts and tsx files. But when I tried to convert a very simple component from .js to .tsx, it does not compile. I get the error:
"This dependency was not found:
* Components/Molecules/SectionA/ButtonBarFooter in ./src/components/Organisms/SectionA/Form.js
To install it, you can run: npm install --save Components/Molecules/SectionA/ButtonBarFooter
I thought that maybe it had something to due with configuring aliases in our webpack config because Components is an alias. So I duplicated it into the tsConfig. But that has not fixed this error. Why can't ButtonBarFooter.tsx be found by the parent component on compile?
tsconfig.json:
{
"compilerOptions": {
"sourceMap": true,
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"declaration": true,
"emitDeclarationOnly": true,
"noEmit": true,
"jsx": "react",
"baseUrl": "./src",
"paths": {
"Actions/*": ["actions/*"],
"Components/*": ["components/*"],
"Assets/*": ["assets/*"],
"Util/*": ["util/*"],
"Routes/*": ["routes/*"],
"Constants/*": ["constants/*"],
"Helpers/*": ["helpers/*"],
"Api/*": ["api/*"]
}
},
"include": ["src"]
}
webpack.config.json (resolve is commented out because when it was active, it couldn't find 35 modules, which were JS components!):
'use strict';
/**
* Webpack Config
*/
const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
// Webpack uses `publicPath` to determine where the app is being served from.
// In development, we always serve from the root. This makes config easier.
const publicPath = '/';
// Make sure any symlinks in the project folder are resolved:
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
// plugins
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// the path(s) that should be cleaned
let pathsToClean = ['dist', 'build'];
// the clean options to use
let cleanOptions = {
root: __dirname,
verbose: false, // Write logs to console.
dry: false,
};
module.exports = {
entry: ['babel-polyfill', 'react-hot-loader/patch', './src/index.js'],
output: {
// The build folder.
path: resolveApp('dist'),
filename: 'static/js/[name].[hash:8].js',
publicPath: publicPath,
hotUpdateChunkFilename: 'hot/hot-update.js',
hotUpdateMainFilename: 'hot/hot-update.json',
},
devServer: {
contentBase: './src/index.js',
host: '0.0.0.0',
compress: true,
port: 9000, // port number
historyApiFallback: true,
quiet: true,
disableHostCheck: true,
},
devtool: 'inline-source-map',
// resolve alias (Absolute paths)
resolve: {
alias: {
Actions: path.resolve(__dirname, 'src/actions/'),
Components: path.resolve(__dirname, 'src/components/'),
Assets: path.resolve(__dirname, 'src/assets/'),
Util: path.resolve(__dirname, 'src/util/'),
Routes: path.resolve(__dirname, 'src/routes/'),
Constants: path.resolve(__dirname, 'src/constants/'),
Helpers: path.resolve(__dirname, 'src/helpers/'),
Api: path.resolve(__dirname, 'src/api/'),
},
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
resolve: {
extensions: ['.ts', '.tsx'],
},
use: 'ts-loader',
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
//loader: "source-map-loader",
},
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true },
},
],
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: '/',
hmr: process.env.NODE_ENV === 'production',
},
},
'css-loader',
],
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000',
},
// Scss compiler
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'production',
},
},
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
],
},
// resolve: {
// // Add '.ts' and '.tsx' as resolvable extensions.
// extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
// },
performance: {
hints: process.env.NODE_ENV === 'production' ? 'warning' : false,
},
plugins: [
new FriendlyErrorsWebpackPlugin(),
new CleanWebpackPlugin({
pathsToClean,
cleanOptions,
}),
new HtmlWebPackPlugin({
template: './public/index.html',
filename: './index.html',
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: '[name].css',
chunkFilename: '[id].css',
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
],
};