exports is not defined webpack 5 babel 7 react-redux - react-native

Question

i am trying to develop a react-native app with react-native-web, everything was working fine until i installed react-redux.
i get the following error in the console
bundle.web.js:9435 Uncaught ReferenceError: exports is not defined
at eval (extends.js:2:23)
at ./node_modules/#babel/runtime/helpers/esm/extends.js (bundle.web.js:132:1)
at __webpack_require__ (bundle.web.js:9432:33)
at fn (bundle.web.js:9619:21)
at eval (connect.js:1:657)
at ./node_modules/react-redux/es/components/connect.js (bundle.web.js:8203:1)
at __webpack_require__ (bundle.web.js:9432:33)
at fn (bundle.web.js:9619:21)
at eval (index.js:1:923)
at ./node_modules/react-redux/es/index.js (bundle.web.js:8333:1)
i tried some of the solutions that i found online, but i couldn't make it to work. i am not sure what i am doing wrong, or what i did to mess things up. any help would be appreciated
this is my webpack.config.cs
const path = require('path');
const webpack = require('webpack');
const appDirectory = path.resolve(__dirname, '../');
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
esModule: false,
},
},
};
module.exports = {
entry: [
"#babel/polyfill",
path.resolve(appDirectory, 'index.web.js'),
],
plugins: [
new webpack.DefinePlugin({ process: { env: {} } })
],
output: {
filename: 'bundle.web.js',
path: path.resolve(appDirectory, 'dist'),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-react',
{
plugins: ['#babel/plugin-proposal-class-properties']
}
],
sourceType: 'unambiguous'
},
},
},
{
test: /\.ttf$/,
loader: "url-loader",
include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
}, imageLoaderConfiguration],
},
resolve: {
alias: {
'react-native$': 'react-native-web',
},
extensions: ['.web.js', '.js', '.jsx'],
},
};
and my package.json
{
"name": "awesomeproject",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"web": "webpack serve -d eval --mode development --config \"./web/webpack.config.js\" --inline --color --hot",
"build:web": "webpack --mode production --config \"./web/webpack.config.js\" --hot"
},
"dependencies": {
"#babel/preset-react": "^7.16.7",
"#react-native-community/checkbox": "^0.5.12",
"#react-navigation/bottom-tabs": "^6.3.1",
"#react-navigation/drawer": "^6.3.1",
"#react-navigation/native": "^6.0.8",
"#react-navigation/native-stack": "^6.5.0",
"#reduxjs/toolkit": "^1.8.2",
"axios": "^0.21.1",
"react": "17.0.1",
"react-dom": "^17.0.2",
"react-native": "0.64.2",
"react-native-gesture-handler": "^2.3.0",
"react-native-reanimated": "^2.4.1",
"react-native-safe-area-context": "^3.4.1",
"react-native-screens": "^3.13.1",
"react-native-vector-icons": "^9.1.0",
"react-native-web": "^0.16.5",
"react-redux": "^8.0.2",
"redux": "^4.2.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/polyfill": "^7.12.1",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"#redux-devtools/core": "^3.13.1",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-react-native-web": "^0.16.5",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"react-test-renderer": "17.0.1",
"url-loader": "^4.1.1",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"jest": {
"preset": "react-native-web"
},
"rnpm": {
"assets": [
".src/assets/fonts/"
]
}
}