React native web not running because of React Navigation

[tejas0105]

When I try to run npm run web, I get this error in browser's console "Uncaught ReferenceError: exports is not defined at eval (index.js:2:23) at ./node_modules/@react-navigation/native/lib/module/index.js (bundle.js:400:1) at webpack_require (bundle.js:3780:32) at fn (bundle.js:3987:21)"

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './index.web.js',
resolve: {
extensions: ['.web.js', '.js', '.ts', '.tsx', '.json'],
alias: {
'react-native$': 'react-native-web',
},
fullySpecified: false,
},
module: {
rules: [
{
test: /.(js|jsx|ts|tsx)$/,
exclude:
/node_modules/(?!(react-native-web|@react-navigation|react-native-reanimated|react-native-gesture-handler)/).*/,
use: 'babel-loader',
},
{
test: /.json$/,
type: 'json',
},
// Rule for handling image files
{
test: /.(png|jpe?g|gif|svg|webp)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
},
},
],
},
],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
devServer: {
static: './public/index.html',
port: 8080,
},
};

// babel.config.js
module.exports = {
presets: ['module:@react-native/babel-preset', '@babel/preset-typescript'],
plugins: [
[
'module:react-native-dotenv',

  {
    moduleName: '@env',
    path: '.env',
    blacklist: null,
    whitelist: null,
    safe: false,
    allowUndefined: true,
  },
],
// ['react-native-web', {commonjs: true}],
// '@babel/plugin-proposal-export-namespace-from',

],
};

// App.tsx
import React from 'react';
import { SafeAreaView, StatusBar, Text, View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { DefaultTheme, NavigationContainer } from '@react-navigation/native';
// import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import AppNavigator from './navigation/AppNavigator';

const queryClient = new QueryClient();
const App = () => {
return (

{/*
hi
/}
{/ <GestureHandlerRootView style={{ flex: 1}}> */}

                     <NavigationContainer>
                            <QueryClientProvider client={queryClient}>
                                    {/* <StatusBar
                                        backgroundColor={isDarkTheme === true ? '#000' : '#fff'}
                                        barStyle={
                                            isDarkTheme === true ? 'light-content' : 'dark-content'
                                        }
                                        translucent={true}
                                    /> */}
                                <AppNavigator />
                            </QueryClientProvider>
                        </NavigationContainer>
                {/* </GestureHandlerRootView> */}
            </SafeAreaProvider>

);
};

export default App;

// package.json
{
"name": "playyStudio",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"start:uat": "npm run cp:env:uat && react-native start --reset-cache",
"start:prod": "npm run cp:env:prod && react-native start --reset-cache",
"web": "webpack serve --mode=development --config webpack.config.js",
"test": "jest",
"cp:env:uat": "cp -rf ./env/.env.uat .env",
"cp:env:prod": "cp -rf ./env/.env.prod .env"
},
"dependencies": {
"@react-navigation/native": "^7.1.8",
"@react-navigation/stack": "^7.3.1",
"@tanstack/react-query": "^5.75.5",
"react": "18.3.1",
"react-dom": "^18.3.1",
"react-native": "0.76.0",
"react-native-dotenv": "^3.4.11",
"react-native-encrypted-storage": "^4.0.3",
"react-native-event-listeners": "^1.0.7",
"react-native-gesture-handler": "^2.25.0",
"react-native-keyboard-controller": "^1.17.1",
"react-native-safe-area-context": "^5.4.0",
"react-native-safearea-height": "^1.0.8",
"react-native-screens": "^4.10.0",
"react-native-web": "^0.20.0",
"ts-loader": "^9.5.2"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@babel/plugin-transform-runtime": "^7.27.1",
"@babel/preset-env": "^7.27.2",
"@babel/preset-react": "^7.27.1",
"@babel/preset-typescript": "^7.27.1",
"@babel/runtime": "^7.25.0",
"@react-native-community/cli": "15.0.0-alpha.2",
"@react-native-community/cli-platform-android": "15.0.0-alpha.2",
"@react-native-community/cli-platform-ios": "15.0.0-alpha.2",
"@react-native/babel-preset": "0.76.0",
"@react-native/eslint-config": "0.76.0",
"@react-native/metro-config": "0.76.0",
"@react-native/typescript-config": "0.76.0",
"@svgr/webpack": "^8.1.0",
"@types/react": "^18.2.6",
"@types/react-native-dotenv": "^0.2.2",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"babel-loader": "^10.0.0",
"babel-plugin-react-native-web": "^0.20.0",
"eslint": "^8.19.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.6.3",
"jest": "^29.6.3",
"metro-react-native-babel-preset": "^0.77.0",
"prettier": "2.8.8",
"react-test-renderer": "18.3.1",
"typescript": "5.0.4",
"url-loader": "^4.1.1",
"webpack": "^5.99.8",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.1"
},
"engines": {
"node": ">=18"
}
}

[bebstein-pass]

It's probably a duplicate of #2776

[HiteshHexa]

Hey guys,
I am having the same issue; Could you let me know if anyone has an idea or suggestion?