Uncaught ReferenceError: exports is not defined in React Native Web in Windows 10 - react-native

Question

I am trying to build react-native-web by using react-native cli code.
Initially, I successfully run out in macOS (BigSur), but can't start in the Windows 10.
I am using webpack 5.x, babel 7.x, react-native 0.63 now.
webpack.config.js
const _ = require('underscore')
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const platformIndex = _.findIndex(process.argv, arg => arg === '--platform');
const platform = (platformIndex > 0) ? process.argv[platformIndex + 1] : 'web';
// const platformExclude = platform === 'web' ? new RegExp(/\.web\.js$/) : new RegExp(/\.js$/);
// const platformExclude = new RegExp(/\.web\.js$/);
const appDirectory = path.resolve(__dirname, '../');
const includeModules = [
'react-native-animatable',
'react-native-reanimated',
'react-native-picker-select',
'react-native-web',
'#react-native-picker',
'react-native-modal',
'react-native-gesture-handler',
'react-native-flipper',
'react-native-indicators',
'react-native-vector-icons',
'react-native/Libraries',
].join('|');
// This is needed for webpack to compile JavaScript.
const babelLoaderConfiguration = {
test: /\.js$/,
loader: 'babel-loader',
/**
* Exclude node_modules except any packages we need to convert for rendering HTML because they import
* "react-native" internally and use JSX which we need to convert to JS for the browser.
*
* You'll need to add anything in here that needs the alias for "react-native" -> "react-native-web"
* You can remove something from this list if it doesn't use "react-native" as an import and it doesn't
* use JSX/JS that needs to be transformed by babel.
*/
exclude: [
new RegExp(`node_modules/(?!(${includeModules})/).*|.native.js$`),
],
options: {
cacheDirectory: true,
// The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
presets: ['module:metro-react-native-babel-preset'],
// Re-write paths to import only the modules needed by the app
plugins: [
'react-native-web',
[
'module-resolver',
{
alias: {
'^react-native$': 'react-native-web',
},
},
],
],
}
}
// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
esModule: false,
},
},
};
// react-native-vector-icon.
const reactNativeVectorIconConfig = {
test: /\.ttf$/,
loader: "url-loader", // or directly file-loader
include: path.resolve(appDirectory, "node_modules/react-native-vector-icons"),
};
const webpackConfig = {
entry: [
// load any web API polyfills
// path.resolve(appDirectory, 'polyfills-web.js'),
// your web-specific entry file
path.resolve(appDirectory, 'index.web.js'),
],
// configures where the build ends up
output: {
filename: 'bundle.web.js',
path: path.resolve(appDirectory, 'dist'),
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: 'web/index.html',
filename: 'index.html',
usePolyfillIO: true,
})
],
// ...the rest of your config
module: {
rules: [babelLoaderConfiguration, imageLoaderConfiguration, reactNativeVectorIconConfig],
},
resolve: {
// This will only alias the exact import "react-native"
alias: {
'react-native-config': 'react-web-config',
'react-native$': 'react-native-web',
},
// If you're working on a multi-platform React Native app, web-specific
// module implementations should be written in files using the extension
// `.web.js`.
extensions: ['.web.js', '.js', '.jsx'],
},
devServer: {
historyApiFallback: true,
},
};
if(process.env.NODE_ENV === 'desktop') {
webpackConfig.target = 'electron-renderer'
}
module.exports = webpackConfig
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset']
};
package.json (dev dependencies)
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/runtime": "^7.8.4",
"#react-native-community/eslint-config": "^1.1.0",
"babel-jest": "^25.1.0",
"babel-loader": "^8.2.3",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-react-native-web": "^0.17.5",
"clean-webpack-plugin": "^4.0.0",
"concurrently": "^6.5.1",
"electron": "^16.0.5",
"electron-builder": "^22.14.5",
"electron-is-dev": "^2.0.0",
"electron-reloader": "^1.2.1",
"eslint": "^7.9.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"jest": "^25.1.0",
"jest-fetch-mock": "^3.0.3",
"metro-react-native-babel-preset": "^0.59.0",
"portfinder": "^1.0.28",
"prettier": "^2.1.1",
"react-test-renderer": "16.13.1",
"url-loader": "^4.1.1",
"wait-on": "^6.0.0",
"wait-port": "^0.2.9",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.1"
},
When I run it, it shows below error