Vite Rollup missing exports in Systemjs bundle

Question

I am using vite in a react TS project. My goal is to build the project into a systemjs bundle.

this is my vite config;

export default defineConfig({
  plugins: [react()],
  server: {
    port: 8001,
  },
  build: {
    rollupOptions: {
      input: "src/main.tsx",
      output: {
        entryFileNames: `[name]-chat-fe.js`,
        chunkFileNames: `[name]-chat-fe.js`,
        assetFileNames: `[name]-chat-fe.[ext]`,
        format: "system",
      },
      external: ["@mui/material", "react", "react-dom"],
    },
  },
});

The problem is that my exported functions do not end up in exports callback function of systemjs in the final bundle. as an example my bundle looks like this, which is missing exports('unmount', unmount);

System.register([], function (exports, module) {
  "use strict";
  return {
    execute: function () {
      function unmount(containerId) {
        // Your code...
      }
    // expect to see  exports('unmount', unmount); here but it is missing
    }
  };
});

The simplified version of my main.tsx is:

export function unmount(containerId: string) {
  if (rootInstance) {
    rootInstance.unmount();
    rootInstance = null;
  } else {
    console.error(`Application not mounted to "${containerId}"`);
  }
}

As a result when importing my systemjs bundle in another app, I can not access the exported functions.

Answer 1

The solution was setting preserveEntrySignatures properly.

  build: {
    rollupOptions: {
      // Keep exports as defined in source
      preserveEntrySignatures: "allow-extension",