Webpack 5 resolving a .tgz file dependency in package.json - file

Question

I installed a local .tgz package via npm "mdb-react-ui-kit": "file:mdb-react-ui-kit-4.0.0.tgz" (in my package.json). When I run npm run start. When running, I get an error from webpack saying it cannot resolve the .tgz file as it only looks in the node_modules folder. The file is stored in my project root folder.
How can I load this .tgz file correctly?
Error Message:
error message
Project Directory:
project directory
App.js:
import React from 'react';
import { MDBBtn, MDBContainer } from 'mdb-react-ui-kit';
function App() {
return (
<MDBContainer fluid>
<div
className='d-flex justify-content-center align-items-center'
style={{ height: '100vh' }}
>
<div className='text-center'>
<img
className='mb-4'
src='https://mdbootstrap.com/img/logo/mdb-transparent-250px.png'
style={{ width: 250, height: 90 }}
/>
<h5 className='mb-3'>
Thank you for using our product. We're glad you're with us.
</h5>
<p className='mb-3'>MDB Team</p>
<MDBBtn
tag='a'
href='https://mdbootstrap.com/docs/standard/getting-started/'
target='_blank'
role='button'
>
Start MDB tutorial
</MDBBtn>
</div>
</div>
</MDBContainer>
);
}
export default App;
Package.json:
{
"name": "mdb-react-template",
"version": "4.0.0",
"description": "template for mdb-react-ui-kit",
"private": true,
"dependencies": {
"history": "^5.3.0",
"mdb-react-ui-kit": "file:mdb-react-ui-kit-4.0.0.tgz",
"nodemon": "^2.0.18",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.2.7",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.0",
"imports-loader": "^4.0.0",
"postcss-loader": "^7.0.0",
"resolve-url-loader": "^5.0.0",
"sass-loader": "^13.0.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webfontloader": "^1.6.28",
"webpack": "^5.4.0",
"webpack-cli": "^4.1.0",
"webpack-dev-server": "^4.9.1",
"webpack-merge": "^5.2.0"
},
...
}
}
Webpack.common.js:
const WebpackShellPlugin = require('webpack-shell-plugin')
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-react', '#babel/preset-env'],
plugins: ['#babel/plugin-transform-runtime'],
},
},
},
{
test: /\.tgz$/,
enforce: 'pre',
use: 'raw-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(scss)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
},
]
},
],
},
resolve: {
alias: {
MDBPackage: path.resolve(__dirname, '../mdb-react-ui-kit-4.0.0.tgz'),
},
},
};
Webpack.dev.js:
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const commonConfig = require('./webpack.common');
const packageJson = require('../package.json');
const path = require('path');
const devConfig = {
mode: 'development',
output: {
publicPath: 'http://localhost:8090/', // don't forget the slash at the end
},
devServer: {
port: 8090,
historyApiFallback: {
index: 'index.html',
},
},
plugins: [
new ModuleFederationPlugin({
name: 'mdbReactMod',
filename: 'remoteEntry.js',
exposes: {
'./MDBReactApp': './src/bootstrap',
'./Tables': './src/components/table/CompanyUsersTable'
},
shared: packageJson.dependencies,
}),
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
};
module.exports = merge(commonConfig, devConfig);