Module federation - failing to share code between 2 micro-frontends

Question

i have a very simple Module Federation setup with 2 apps (host and remote), using React Router v7 (i assume the same would apply to Remix) and the Vite MF plugin: @module-federation/vite.

Here is the Vite config of the host:

export default defineConfig({
    cors: false,
  },
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    },
  },
  plugins: [reactRouter(), tsconfigPaths(), mkcert(),
  federation({
    name: 'rrv7',
    filename: 'remoteEntry.js',
    remotes: {
      rrv7_remote: 
        'rrv7_remote@httsp://localhost:5174/remoteEntry.js',
    },
    shared: []
  })

  ],
});

And here is the Vite config of the remote:

export default defineConfig({
  server: {
    port: 5174,
    proxy: {},
    cors: false,
  },
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    },
  },
  plugins: [reactRouter(), tsconfigPaths(), mkcert(),
  federation({
    name: 'rrv7_remote',
    filename: 'remoteEntry.js',
    exposes: {
      "./About": "app/routes/about.tsx"
    },
    shared: ['react']
  })
  ],
});

However, i keep getting the following error when i open my host app:

require is not defined
    at eval (/local/home/rrv7/node_modules/__mf__virtual/rrv7__loadRemote__rrv7_remote_mf_1_about__loadRemote__.js:4:26)
    at instantiateModule (file:///local/rrv7/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:52974:11

What is the issue here?