firebase with react and custom webpack throws export loader error - reactjs

Question

i'm facing an issue with react with custom webpack config while I try to implement firebase
react version: 17+
webpack version: 5+
firebase: 9+
so when i try to import any function from firebase/messaging (also tried other packages from firebase like analytics, same issue happens) it throws an error about exports-loader module that is not installed.
then after installation it throws this error then:
ERROR in ./node_modules/whatwg-fetch/fetch.js (./node_modules/exports-loader/dist/cjs.js?self.fetch!./node_modules/whatwg-fetch/fetch.js)
Module build failed (from ./node_modules/exports-loader/dist/cjs.js):
ValidationError: Invalid options object. Exports Loader has been initialized using an options object that does not match the API schema.
options misses the property 'exports'. Should be:
non-empty string | non-empty string | object { name, syntax?, alias? } | [non-empty string | object { name, syntax?, alias? }, ...] (should not
have fewer than 1 item)
here is my webpack config, is there anything that I'm missing from webpack config or is this issue caused by webpack at all?
module.exports = {
devtool: 'eval',
entry: ['app/app.js'],
loader: { target: 'web' },
mode: 'development',
module: {
strictExportPresence: true,
rules: [
{
test: /\.svg/,
use: {
loader: 'svg-url-loader',
options: {
iesafe: true,
},
},
},
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
loader: 'babel-loader',
include: [PATHS.APP_DIR],
exclude: [/node_modules/],
options: {
...babelConfig,
},
},
{
test: /\.(eot|otf|ttf|woff|woff2)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[contenthash].[ext]',
outputPath: 'fonts',
},
},
],
},
{
test: /\.(gif|png|jpe?g)$/i,
use: [
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65,
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.9],
speed: 4,
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75,
},
},
},
{
loader: 'file-loader',
options: {
name: '[name].[contenthash].[ext]',
outputPath: 'images',
},
},
],
},
{
test: /\.(s*)css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
},
},
],
},
],
},
node: { global: false, __dirname: false, __filename: false },
output: {
path: 'build/',
publicPath: '/',
filename: '[name].js',
chunkFilename: '[name].chunk.js',
},
plugins: [
new WebpackBar({
name: 'CSR',
color: '#FFEB3B',
}),
new webpack.ProvidePlugin({
// make fetch available
fetch: 'exports-loader?self.fetch!whatwg-fetch',
}),
new webpack.DefinePlugin({
'process.env': webpackEnv(),
}),
new LoadablePlugin({
filename: 'loadable-stats.json',
writeToDisk: true,
}),
new CopyPlugin({
patterns: [
{
from: path.join('resources', 'public'),
to: 'build',
},
],
}),
new HtmlWebPackPlugin({
template: `/index.ejs`,
title: 'MY APP',
}),
new webpack.HotModuleReplacementPlugin({
multiStep: false,
}),
new CircularDependencyPlugin({
exclude: /a\.js|node_modules/, // exclude node_modules
failOnError: false, // show a warning when there is a circular dependency
}),
],
resolve: {
modules: ['node_modules'],
alias: {
// my aliases
},
},
stats: { preset: 'minimal', moduleTrace: true, errorDetails: true },
target: 'web',
};

Answer 1

the issue was caused by whatwg-fetch
fetch: 'exports-loader?self.fetch!whatwg-fetch',
by removing this line since it wasn't necessary, the problem has been solved