Cannot GET manifest.json react webpack - reactjs

Question

I've been running a TS react app with WebPack and get an issue where it will not load manifest.json and so will not load the tab icon:
I have it set up with the typical react app structure where you have the default public folder with the favicon.ico, manifest.json, logo pngs, etc and then the src folder with the app as follows:
My-App
dist/
node_modules/
public/
favicon.ico
index.html
manifest.json
robots.txt
...
src/
Here's my webpack.config.json for reference:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const InterpolateHtmlPlugin = require('interpolate-html-plugin')
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.tsx'),
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
devtool: "source-map",
mode: "development",
devServer: {
historyApiFallback: true,
contentBase: path.resolve(__dirname, 'dist'),
port: 3000
},
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx']
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: ['ts-loader']
},
{
test: /\.s(a|c)ss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[local]'
}
}
},
'sass-loader'
]
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.html/,
use: ['html-loader']
},
{
test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
exclude: /node_modules/,
use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
},
{
test: /\.woff(2)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: './font/[hash].[ext]',
mimetype: 'application/font-woff'
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public', 'index.html'),
filename: './index.html',
manifest: "./manifest.json"
}),
// new InterpolateHtmlPlugin({
// PUBLIC_URL: 'static' // can modify `static` to another name or get it from `process`
// }),
]
};
As you can see I tried using the InterpolateHtml plugin but no matter what I did I would get this tap error as follows
[webpack-cli] TypeError: Cannot read property 'tap' of undefined
at /home/myufa/home/personal/vibe-mill/frontend/node_modules/interpolate-html-plugin/index.js:35:63
at Hook.eval [as call] (eval at create (/home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:100:1)
at Hook.CALL_DELEGATE [as _call] (/home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
at Compiler.newCompilation (/home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/lib/Compiler.js:988:26)
at /home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/lib/Compiler.js:1029:29
at Hook.eval [as callAsync] (eval at create (/home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
at Compiler.compile (/home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/lib/Compiler.js:1024:28)
at /home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/lib/Compiler.js:471:12
at Compiler.readRecords (/home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/lib/Compiler.js:866:11)
npm ERR! code ELIFECYCLE
This is my first time using Webpack so I'm not sure how to debug. Any help would be much appreciated!