getting error of shared module doesnot exist

[pritiranjan-r]

error message:
Uncaught Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react
at webpack_require.m. (bundle.js:1165:53)
at webpack_require (bundle.js:357:31)
at fn (bundle.js:701:20)
at eval (index.js:2:63)
at ./src/index.js (bundle.js:37:1)
at webpack_require (bundle.js:357:31)
at bundle.js:1278:36Understand this errorAI
hook.js:608 Initialization of sharing external failed: ScriptExternalLoadError: Loading script failed.
(missing: http://localhost:4173/assets/remoteEntry.js)
overrideMethod @ hook.js:608Understand this warningAI

THis is my vite config file
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'

// https://vitejs.dev/config/
import svgr from 'vite-plugin-svgr';

export default defineConfig({
plugins: [
react(),
svgr({
include: 'src/**/*.svg',
}),
federation({
name: "viteRemote",
filename: "remoteEntry.js",
exposes: {
'./VbcHeader': './src/components/header'
},
shared: ['react','react-dom']
})
],
build: {
modulePreload: false,
target: 'esnext',
minify: false,
cssCodeSplit: false
}
})

and this is my webpack configuration

const { ModuleFederationPlugin } = require('webpack').container;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require("path");

/** @type {import('webpack').Configuration} /
module.exports = {
entry: './src/main',
mode: 'production',
target: 'web',
devtool: 'eval-source-map',
resolve: {
extensions: ['.js', '.jsx'],
},
output: {
path: path.resolve(__dirname, "dist"), // Output directory
filename: "bundle.js", // Output file name
clean: true, // Cleans the output directory before each build
libraryTarget: 'module',
},
experiments: {
outputModule: true, // Enable experimental ESM output
},
target: 'web', // Target browsers that support ESModules
optimization: {
minimize: true,
},
performance: {
hints: false,
maxEntrypointSize: 512_000,
maxAssetSize: 512_000
},
module: {
rules: [
{
test: /.svg/,
type: 'asset/resource'
},
{
test: /.css$/i,
use: ["css-loader"],
},
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: [
["@babel/preset-react", {"runtime": "automatic"}]
],
},
},
],
},
plugins: [
new HtmlWebpackPlugin(),
new ModuleFederationPlugin({
name: 'webpackHost',
filename: 'remoteEntry.js',
remotes: {
viteRemote: viteRemote@http://localhost:4173/assets/remoteEntry.js,
},
shared: {
react: {
singleton: true,
},
'react-dom': {
singleton: true,
},
},
}),
],
devServer: {
port: 8080,
headers: {
'Access-Control-Allow-Origin': '',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
},
},
};