vite with SSR: require is not defined

[omridevk]

when using SSR, I am getting the following error:

11:02:24 AM [vite] Error when evaluating SSR module /node_modules/__mf__virtual/host_mf_2_page_mf_2_app__loadRemote__remote_mf_1_remote_mf_2_app__loadRemote__.js:
|- ReferenceError: require is not defined

see stackblitz for reproduction:
https://stackblitz.com/edit/github-ad1c93-e4uuvj?file=vite.config.ts,src/main.jsx,test.js

vite config:

import { defineConfig } from 'vite';
import { federation } from '@module-federation/vite';

export default defineConfig({
  ssr: {
    optimizeDeps: {
      include: ['__mf__virtual', '@module-federation/runtime'],
    },
  },
  plugins: [
    federation({
      name: 'host-page-app',
      remotes: {
        remote: {
          type: 'module',
          name: 'remote',
          entry: 'http://test/remoteEntry.js',
          entryGlobalName: 'remote',
          shareScope: 'default',
        },
      },
      filename: 'remoteEntry.js',
    }),
  ],
});

[omridevk]

run
npm run test
to see the error

[gioboa]

Thanks @omridevk for your feedback. We still need to focus into the SSR story, would you like to tackle the problem?

[omridevk]

sure, it was quite easy to resolve this by using

import { createRequire } from 'node:module';
const require = createRequire(import.meta.url);

and using
default export
instead of the CJS module.exports

[gioboa]

@omridevk awesome 👏 I'm looking forward to testing your PR 🚀

[ansbar]

@omridevk could you please post a PR or where to use your fix above. We seem to struggle with a simular problem =/

[RobinBomkamp]

We are also facing the same problem in SvelteKit. It was working in version 0.2.8. see #163

[omridevk]

Yes sorry, had to shift my focus on something else, hopefully will get to this, this week

[veeramarni]

I couldn't find a workaround for this issue. I'm testing this with Remix app.

[omridevk]

@gioboa I was able to get the preview working, but I can't seem to be able to run tests, it is running into some memory issues, i'll add the logs later today

[omridevk]

virtualRemotes.ts

import VirtualModule from '../utils/VirtualModule';
import { virtualRuntimeInitStatus } from './virtualRuntimeInitStatus';

const cacheRemoteMap: {
  [remote: string]: VirtualModule;
} = {};
export const LOAD_REMOTE_TAG = '__loadRemote__';
export function getRemoteVirtualModule(remote: string, command: string) {
  if (!cacheRemoteMap[remote]) {
    cacheRemoteMap[remote] = new VirtualModule(remote, LOAD_REMOTE_TAG, '.js');
    cacheRemoteMap[remote].writeSync(generateRemotes(remote, command));
  }
  const virtual = cacheRemoteMap[remote];
  return virtual;
}
const usedRemotesMap: Record<string, Set<string>> = {
  // remote1: {remote1/App, remote1, remote1/Button}
};
export function addUsedRemote(remoteKey: string, remoteModule: string) {
  if (!usedRemotesMap[remoteKey]) usedRemotesMap[remoteKey] = new Set();
  usedRemotesMap[remoteKey].add(remoteModule);
}
export function getUsedRemotesMap() {
  return usedRemotesMap;
}
export function generateRemotes(id: string, command: string) {
  return `
    import { createRequire } from 'node:module';
    const require = createRequire(import.meta.url);
    const {loadRemote} = require("@module-federation/runtime")
    const {initPromise} = require("${virtualRuntimeInitStatus.getImportId()}")
    const res = initPromise.then(_ => loadRemote(${JSON.stringify(id)}))
    const exportModule = ${command !== 'build' ? '/*mf top-level-await placeholder replacement mf*/' : 'await '}initPromise.then(_ => res)
    export default exportModule;
  `;
}

[gioboa]

@omridevk nice 👏 great
can you create a PR with your changes please? In this way we can test it in different environments