Cannot access XXX before initialization with react module federation

[wise carbon]

Hello I am working with react and module federation but I encouter an issue that crash my application.

I need to import a view from one app to an other, the view use react-router with nested route. Each time I try to import something from the host app in the remote app I have a compilation error that tell me I can not access the view from before initialization, however this error happen in the router definition from he host app but I never call this file or use it. I try to comment this part and then I have the same error ( but with an other module) in the main.tsx file.

**here is the router.tsx from the host **

import { Home } from '@view/home';
import { Messenger } from '@view/messenger';
import { RouteObject } from 'react-router-dom';
import { MessengerGroup } from '@view/messenger/[group_id]';
import { MessengerRoot } from '@view/messenger/[root]';
import { PhotoLibrary } from '@view/photoLibrary';
import { BannersEnterprise } from '@view/banners/enterprise/banners.enterprise';
import { BannersHistory } from '@view/banners/history/banners.history';
import { Banners } from '@view/banners';
import { Note } from '@/view/note';

export const routesConfig: RouteObject[] = [
  {
    index: true,
    element: <Home />,
  },
  {
    path: 'messenger',
    element: <Messenger />,
    children: [
      {
        index: true,
        element: <MessengerRoot />,
      },
      {
        path: ':group_id',
        element: <MessengerGroup />,
      },
    ],
  },
  {
    path: 'photoLibrary',
    element: <PhotoLibrary />,
  },
  {
    path: 'banners',
    element: <Banners />,
    children: [
      {
        index: true,
        element: <BannersHistory />,
      },
      {
        path: 'enterprise',
        element: <BannersEnterprise />,
      },
    ],
  },
  {
    path: 'note',
    element: <Note />,
  },
];

**vite.config.ts (host ) **

import { sentryVitePlugin } from "@sentry/vite-plugin";
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
import checker from 'vite-plugin-checker';
import federation from '@originjs/vite-plugin-federation';

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    outDir: 'dist',
    modulePreload: false,
    target: 'esnext',
    minify: false,
    cssCodeSplit: false,
    sourcemap: true
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@components': resolve(__dirname, 'src/components'),
      '@provider': resolve(__dirname, 'src/provider'),
      '@view': resolve(__dirname, 'src/view'),
      '@config': resolve(__dirname, 'src/config'),
      '@hooks': resolve(__dirname, 'src/hooks'),
      '@services': resolve(__dirname, 'src/services'),
      '@types': resolve(__dirname, 'src/@types'),
    },
  },
  plugins: [
  react(),
  checker({
    typescript: {
      tsconfigPath: './tsconfig.json',
    },
  }), 
  federation({
    name: 'tablet',
    filename: 'remoteEntry.js',
    exposes: {
      './Messenger': './src/view/messenger/index.tsx',
      './MessengerRoot': './src/view/messenger/[root]/index.tsx',
      './MessengerGroup': './src/view/messenger/[group_id]/index.tsx',
      './provider': './src/provider/index.tsx',
    },
    shared: [
      'react',
      'react-dom',
      '@mui/lab',
      '@mui/material',
      '@mui/x-data-grid-premium',
      '@emotion/react',
      '@emotion/styled',
      'react-i18next',
      'react-hook-form',
      '@tanstack/react-query',
      'socket.io-react-hook',
      'react-router-dom',
    ],
  }), sentryVitePlugin({
    org: "21jumpclick",
    project: "tablet-nui",
    url: "https://sentry.fafa1510.be"
  })
],
});

vite.config.ts (remote)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

import { resolve } from 'path'
import checker from 'vite-plugin-checker'
import federation from '@originjs/vite-plugin-federation'

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    outDir: 'build',
    modulePreload: true,
    target: 'esnext',
    minify: true,
    cssCodeSplit: false
  },
  optimizeDeps: {
    esbuildOptions: {
      target: 'esnext',
    },
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@components': resolve(__dirname, 'src/components'),
      '@provider': resolve(__dirname, 'src/provider'),
      '@view': resolve(__dirname, 'src/view'),
      '@config': resolve(__dirname, 'src/config'),
      '@hooks': resolve(__dirname, 'src/hooks'),
      '@services': resolve(__dirname, 'src/services'),
    },
  },
  plugins: [
    react(),
    checker({
      typescript: true,
    }),
    federation({
      name: 'app',
      remotes: {
        tablet: 'https://tablet.local.dev/assets/remoteEntry.js'
      },
      shared: [
        'react',
        'react-dom',
        '@mui/lab',
        '@mui/material',
        '@mui/x-data-grid-premium',
        '@emotion/react',
        '@emotion/styled',
        'react-i18next',
        'react-hook-form',
        '@tanstack/react-query',
        'socket.io-react-hook',
        'react-router-dom'
      ]
    })
  ]
})