react: Uncaught TypeError: factory is not a function

[PaRoxUs]

Everythign works in dev mode, but if you build without adding:

        exposes: {
          './App': './src/App', // Needed for the build to work
        },

the app won't work and you get Uncaught TypeError: factory is not a function

[gioboa]

hi @PaRoxUs which framework are you using? can you create a basic reproduction please?

[PaRoxUs]

We are using react, I'll try my best to create an example, but it has to wait ATM.

[sougiovn]

Got this error once, the cause was that I was using vite-plugin-top-level-await plugin and building for target >chrome87, which doesn't need this plugin.

[gioboa]

@PaRoxUs did you solve this issue?

[PaRoxUs]

Well, it works if we add the App to the build and I did't have time to create an example with the error.

[gioboa]

I'll try to recreate it, so from the remote you are only exposing the components, right?

[PaRoxUs]

Its our main app that only host remote components, so it dosen't need to expose any components.

[gioboa]

Its our main app that only host remote components, so it dosen't need to expose any components.

Can you share the configurations here please?

[PaRoxUs]

import { defineConfig, UserConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { federation } from '@module-federation/vite'
import { dependencies } from './package.json'
import dotenv from 'dotenv'

dotenv.config({
  path: '.env.' + process.env.ENV,
})

export default defineConfig((): UserConfig => {
  return {
    base: process.env.VITE_APP_BASE,
    plugins: [
      react(),
      federation({
        name: 'main',
        filename: 'main.js',
        shared: {
          react: {
            requiredVersion: dependencies.react,
            singleton: true,
          },
          'react-dom': {
            requiredVersion: dependencies['react-dom'],
            singleton: true,
          },
          jotai: {
            requiredVersion: dependencies.jotai,
            singleton: true,
          },
          'react-router-dom': {
            requiredVersion: dependencies['react-router-dom'],
            singleton: true,
          },
          'react-hook-form': {
            requiredVersion: dependencies['react-hook-form'],
            singleton: true,
          },
          '@tanstack/react-query': {
            requiredVersion: dependencies['@tanstack/react-query'],
            singleton: true,
          },
          '@tanstack/react-table': {
            requiredVersion: dependencies['@tanstack/react-table'],
            singleton: true,
          },
        },
        exposes: {
          './App': './src/App',
        },
        remotes: {
          components: {
            type: 'module',
            name: 'components',
            entry: process.env.VITE_REMOTE_URL_COMPONENTS,
            entryGlobalName: 'components',
            shareScope: 'default',
          },


        },
      }),
    ],
    server: {
      host: 'localhost',
      origin: process.env.VITE_APP_BASE,
      port: 5170,
      proxy: {
        '/api': {
          target: 'http://localhost:8054',
          changeOrigin: true,
        },
      },
    },
    build: {
      modulePreload: false,
      target: 'esnext',
      minify: false,
    },
  }
})

[gioboa]

you should solve the issue with
modulepreload: true it's the default btw

[OlegSotnikov]

Hey @gioboa
Here is our case (Vue 3.5.13, Vite 6.0.7) with the same behavior: if we don't expose App we get "TypeError: factory is not a function". So, it's not react-specific. My guess: there is something with wrong order of imports if we don't expose App.

import { fileURLToPath, URL } from 'node:url'
import { existsSync } from 'node:fs'

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import components from 'unplugin-vue-components/vite'
import autoImport from 'unplugin-auto-import/vite'
import { federation } from '@module-federation/vite'
import unheadVite from '@unhead/addons/vite'

import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
//@ts-expect-error
import { StudioUiResolver } from '@appmaster/studio-ui/resolver/index'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    base: env.VITE_BASE_URL,
    server: {
      port: 8080,
      proxy: {
        '/api': { target: 'https://[MASKED]' },
      },
    },
    preview: {
      proxy: {
        '/api': { target: 'https://[MASKED]' },
      },
    },
    optimizeDeps: {
      include: ['qs', 'tailwindcss/plugin', 'naive-ui'],
    },
    build: {
      target: 'esnext',
      sourcemap: true,
    },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
    plugins: [
      vue(),
      unheadVite(),
      components({
        extensions: ['vue'],
        include: [/\.vue$/, /\.vue\?vue/],
        directoryAsNamespace: true,
        resolvers: [
          NaiveUiResolver(),
          StudioUiResolver({ existsSync, sideEffects: env.NODE_ENV === 'development' }),
        ],
      }),
      autoImport({
        dirs: ['src/use', 'src/store', 'src/utils', 'src/types'],
        imports: [
          'vue',
          'vue-i18n',
          'vue-router',
          {
            'naive-ui': ['useMessage'],
            '@vueuse/rxjs': ['useSubscription'],
          },
        ],
      }),
      federation({
        name: 'base-app',
        filename: 'remoteEntry-[hash].js',
        manifest: true,
        // Uncomment to fix factory is not a function error
        // exposes: {
        //   './App': './src/App.vue',
        // },
        remotes: {
          'mod-auth': {
            type: 'module',
            name: 'mod-auth',
            entry: '/auth/mf-manifest.json',
          },
          'mod-workspace': {
            type: 'module',
            name: 'mod-workspace',
            entry: '/workspace/mf-manifest.json',
          },
        },
        shared: {
          axios: { singleton: true },
          vue: { singleton: true },
          'vue-i18n': { singleton: true },
          'vue-router': { singleton: true },
          dayjs: { singleton: true },
        },
      }),
    ],
  }
})

[OlegSotnikov]

It looks like in our particular case we have an issue with unplugin-auto-import
If we remove it and use manual imports across the project it starts working.

[tejas-1206]

you should solve the issue with modulepreload: true it's the default btw

Did not help. Actually I came across this issue #78 (which has been closed, but I guess need to re-open it) and it seems to be very similar w.r.t this issue. I've shared my findings there and I think it might be helpful for debugging this.

[tejas-1206]

but @PaRoxUs @OlegSotnikov , why do we need to expose the entire App in the first place ? 🤔