Try to import a react remote into an angular host

[lfaure75]

Describe the bug

Hello, I am trying to import a react VITE remote into an angular host built with NX.

When I load the host I have a blank page with the following error in the console:

Uncaught SyntaxError: Cannot use 'import.meta' outside a module (at styles.js:8124:29)
Uncaught TypeError: Failed to resolve module specifier "reactNewViteRemote@http://localhost:4173/assets/remoteReactViteManifest.json". Relative references must start with either "/", "./", or "../".

My react remote is built with VITE: repo: https://github.com/lfaure75/reactViteRemote

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import {federation} from "@module-federation/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'reactNewViteRemote',
      getPublicPath: 'return "http://localhost:4173/"',
      manifest : {
        filePath : './assets/',
        fileName: 'remoteReactViteManifest.json'
      },
      exposes: {
        './Module': './src/App.jsx',
      },
      shared: ['react', 'react-dom']
    }),
  ],
  base: 'http://localhost:4173/',
  server: {
    origin: 'http://localhost:4173/'
  },
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false,
  },
})

For my host, I created a angular component in order to wrap my react remote and update the routes: repo: https://github.com/lfaure75/nx-angular-workspace

my wrapped component:

import { Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
import * as ReactDOM from 'react-dom/client';
import { createElement } from 'react';
import MyReactComponent from 'reactNewViteRemote/Module';

@Component({
  selector: 'app-react-wrapper',
  standalone: true,
  template: '<div id="react-root"></div>'
})
export class ReactWrapperComponent implements OnDestroy {
  private root: ReactDOM.Root;

  constructor(private elRef: ElementRef) {
    this.root = ReactDOM.createRoot(this.elRef.nativeElement.querySelector('#react-root'));
    this.root.render(createElement(MyReactComponent));
  }

  ngOnDestroy(): void {
    if (this.root) {
      this.root.unmount();
    }
  }
}

the routes:

import { NxWelcomeComponent } from './nx-welcome.component';
import { Route } from '@angular/router';

export const appRoutes: Route[] = [
  {
    path: 'angularRemote',
    loadChildren: () =>
      import('angularRemote/Routes').then((m) => m.remoteRoutes),
  },
  {
    path: 'reactNewViteRemote',
    loadChildren: () =>
      import('./react-wrapper.component').then(m => m.ReactWrapperComponent),
  },
  {
    path: '',
    component: NxWelcomeComponent,
  },
];

module federation:

import { ModuleFederationConfig } from '@nx/webpack';

const config: ModuleFederationConfig = {
  name: 'angularHost',
  remotes: [
    'angularRemote',
    ['reactNewViteRemote', 'reactNewViteRemote@http://localhost:4173/assets/remoteReactViteManifest.json']
  ],
};

export default config;

I have the package "@module-federation/enhanced": "0.6.11"

Many thanks in advance for your help

Reproduction

https://github.com/lfaure75/nx-angular-workspace

Used Package Manager

yarn

System Info

System:
    OS: Linux 6.8 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 19.81 GB / 30.97 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.20.4 - ~/.nvm/versions/node/v18.20.4/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.20.4/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v18.20.4/bin/npm
  Browsers:
    Chrome: 130.0.6723.58

Validations

• [X] Read the docs.
• [X] Read the common issues list.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Module federation issue and not a framework-specific issue.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[ScriptedAlchemy]

remote configuration looks wrong. esm remotes are usually {key:url} not {key: global@url}