Is there any way to run with Vite instead of Webpack?

[cesar-zavala-grata]

So we started to build an Add-in, but we started with webpack, and we have seen these kinds of errors:

(This image is not mine; it is from this question: https://stackoverflow.com/questions/76928704/excel-add-in-with-shared-runtime-unhandled-exception-on-displaydialogasync, but technically, we have the same issue.)

And also, Webpack, every time we do an update, takes around 9 seconds to refresh the change; we even have to do a forced update with "Right Click > Update"

So we thought that maybe working with Vite would allow us to develop faster, easier, and better, but we're not really sure how to achieve that.

I started to check this repo:
https://github.com/ExtraBB/Office-Addin-React-Vite-Template

But that one does not support Custom Functions, and we do (commands, custom functions, and taskpane)

And then tried to use some AI help to try to reach it... (but obviously first tried "manually") but nothing seems to work...

With the attached config (at the bottom), everything started to load in the browser, but there is only one thing I notice between Webpack and Vite with these settings, in Webpack I don't see an error stating "OfficeRuntime is undefined" but with Vite I do...

So maybe there is something that I'm missing... (could be that in webpack there is a "copy" that pulls the "JS from the customs.js, which includes that?)", performed a comparison of the "dist/taskpane.html" file vs the vite dist file, and everything looks the same in short... and the add-in is being loaded without further errors in Excel, but once I open the task pane, it states "Error loading the add-in" and I'm unable to debug anything, there are no errors on OfficeAddins.log.txt and since I can't open the Inspector for WebView I'm unable to see anything (I'm running in Windows, Office 365 subscription), tried with Web version but also, loads but does nothing and console shows no errors (tried with npm run start -- web --document {url})

So in general:
We have: Custom Functions, Ribbon (Commands), and Task Pane
We use Shared Runtime
It's Excel only
Manifest is valid (npm run validate)
We're on Windows
Using an Office 365 subscription
We're trying to use Vite instead of Webpack

Here is the vite.config.ts that I worked with some AI help...

import { writeFileSync, readFileSync, copyFileSync, readdirSync, statSync, unlinkSync, rmdirSync } from 'fs';
import { existsSync, mkdirSync } from 'node:fs';
import type { IncomingMessage, ServerResponse } from 'node:http';
import path from 'path';

import legacy from '@vitejs/plugin-legacy';
import react from '@vitejs/plugin-react-swc';
import { generateCustomFunctionsMetadata } from 'custom-functions-metadata';
import * as devCerts from 'office-addin-dev-certs';
import { defineConfig, Plugin, ViteDevServer, IndexHtmlTransformContext, Connect } from 'vite';

interface HttpsOptions {
  ca: string | Buffer;
  key: string | Buffer;
  cert: string | Buffer;
}

async function getHttpsOptions(): Promise<HttpsOptions> {
  const httpsOptions = await devCerts.getHttpsServerOptions();
  return { ca: httpsOptions.ca, key: httpsOptions.key, cert: httpsOptions.cert };
}

const customFunctionsMetadataPlugin = (): Plugin => {
  return {
    name: 'custom-functions-metadata',
    async writeBundle(): Promise<void> {
      const functionsPath = path.resolve(__dirname, 'src/functions/functions.ts');
      const distPath = path.resolve(__dirname, 'dist');
      const outputPath = path.join(distPath, 'functions.json');

      if (!existsSync(distPath)) {
        mkdirSync(distPath, { recursive: true });
      }

      const result = await generateCustomFunctionsMetadata(functionsPath);

      if (result.errors && result.errors.length > 0) {
        console.error('Errors generating custom functions metadata:');
        result.errors.forEach((err) => console.error(err));
      }

      const metadata = JSON.parse(result.metadataJson);
      metadata.allowCustomDataForDataTypeAny = true;

      writeFileSync(outputPath, JSON.stringify(metadata, null, 2));
    },
  };
};

const injectScriptsAndCleanupPlugin = (): Plugin => {
  return {
    name: 'inject-scripts-and-cleanup',
    closeBundle(): void {
      const distPath = path.resolve(__dirname, 'dist');
      const taskpaneHtmlPath = path.join(distPath, 'taskpane.html');
      const assetsPath = path.join(distPath, 'assets');
      const filesToDelete = ['commands.html', 'functions.html'];

      if (existsSync(taskpaneHtmlPath)) {
        let htmlContent = readFileSync(taskpaneHtmlPath, 'utf-8');

        const findFileWithPattern = (pattern: string): string | null => {
          if (!existsSync(assetsPath)) {
            return null;
          }
          const files = readdirSync(assetsPath);
          const found = files.find((file) => file.match(new RegExp(pattern)));
          return found ? `/assets/${found}` : null;
        };

        const commandsJs = findFileWithPattern('^commands-[a-zA-Z0-9]+\\.js$');
        const functionsJs = findFileWithPattern('^functions-[a-zA-Z0-9]+\\.js$');
        const commandsLegacyJs = findFileWithPattern('^commands-legacy-[a-zA-Z0-9]+\\.js$');
        const functionsLegacyJs = findFileWithPattern('^functions-legacy-[a-zA-Z0-9]+\\.js$');

        if (commandsJs && functionsJs && !htmlContent.includes(commandsJs)) {
          const commandsScript = `<script type="module" crossorigin src="${commandsJs}"></script>`;
          const functionsScript = `<script type="module" crossorigin src="${functionsJs}"></script>`;
          htmlContent = htmlContent.replace('</head>', `    ${commandsScript}\n    ${functionsScript}\n  </head>`);
        }

        if (commandsLegacyJs && functionsLegacyJs && !htmlContent.includes('vite-legacy-commands')) {
          const commandsLegacyScript = `<script nomodule crossorigin id="vite-legacy-commands" data-src="${commandsLegacyJs}">System.import(document.getElementById('vite-legacy-commands').getAttribute('data-src'))</script>`;
          const functionsLegacyScript = `<script nomodule crossorigin id="vite-legacy-functions" data-src="${functionsLegacyJs}">System.import(document.getElementById('vite-legacy-functions').getAttribute('data-src'))</script>`;
          htmlContent = htmlContent.replace(
            '</body>',
            `  ${commandsLegacyScript}\n  ${functionsLegacyScript}\n</body>`
          );
        }

        writeFileSync(taskpaneHtmlPath, htmlContent);
      }

      const cleanupHtmlFiles = (dir: string): void => {
        if (!existsSync(dir)) {
          return;
        }

        const files = readdirSync(dir);

        for (const file of files) {
          const fullPath = path.join(dir, file);

          try {
            const stat = statSync(fullPath);

            if (stat.isDirectory()) {
              cleanupHtmlFiles(fullPath);
            } else if (filesToDelete.includes(file)) {
              unlinkSync(fullPath);
            }
          } catch {
            // Skip files that can't be accessed
          }
        }

        if (dir !== distPath) {
          try {
            const remainingFiles = readdirSync(dir);
            if (remainingFiles.length === 0) {
              rmdirSync(dir);
              const parentDir = path.dirname(dir);
              if (parentDir !== distPath && existsSync(parentDir)) {
                const parentFiles = readdirSync(parentDir);
                if (parentFiles.length === 0) {
                  rmdirSync(parentDir);
                }
              }
            }
          } catch {
            // Ignore errors
          }
        }
      };

      cleanupHtmlFiles(distPath);
    },
  };
};

const moveHtmlToRootPlugin = (): Plugin => {
  return {
    name: 'move-html-to-root',
    closeBundle(): void {
      const distPath = path.resolve(__dirname, 'dist');
      const htmlFiles = ['taskpane.html'];
      const authFile = 'auth.html';

      const findAndMoveHtml = (dir: string): void => {
        if (!existsSync(dir)) {
          return;
        }

        const files = readdirSync(dir);

        for (const file of files) {
          const fullPath = path.join(dir, file);

          try {
            const stat = statSync(fullPath);

            if (stat.isDirectory()) {
              findAndMoveHtml(fullPath);
            } else if (htmlFiles.includes(file)) {
              const relativePath = path.relative(distPath, fullPath);
              if (relativePath !== file) {
                const destPath = path.join(distPath, file);
                copyFileSync(fullPath, destPath);
                unlinkSync(fullPath);
              }
            } else if (file === authFile) {
              const relativePath = path.relative(distPath, fullPath);
              const expectedPath = path.join('dialogs', authFile);
              if (relativePath !== expectedPath) {
                const dialogsDir = path.join(distPath, 'dialogs');
                if (!existsSync(dialogsDir)) {
                  mkdirSync(dialogsDir, { recursive: true });
                }
                const destPath = path.join(dialogsDir, authFile);
                copyFileSync(fullPath, destPath);
                unlinkSync(fullPath);
              }
            }
          } catch {
            // Skip files that can't be accessed
          }
        }

        if (dir !== distPath) {
          try {
            const remainingFiles = readdirSync(dir);
            if (remainingFiles.length === 0) {
              rmdirSync(dir);
              const parentDir = path.dirname(dir);
              if (parentDir !== distPath && existsSync(parentDir)) {
                const parentFiles = readdirSync(parentDir);
                if (parentFiles.length === 0) {
                  rmdirSync(parentDir);
                }
              }
            }
          } catch {
            // Ignore errors when trying to remove non-empty directories
          }
        }
      };

      findAndMoveHtml(distPath);
    },
  };
};

const devServerRewritePlugin = (): Plugin => {
  return {
    name: 'dev-server-rewrite',
    configureServer(server: ViteDevServer): void {
      const assetsPath = path.resolve(__dirname, 'assets');
      const distPath = path.resolve(__dirname, 'dist');

      server.middlewares.use((req: IncomingMessage, res: ServerResponse, next: Connect.NextFunction) => {
        if (req.url?.startsWith('/assets/')) {
          const fileName = req.url.replace('/assets/', '');
          const filePath = path.join(assetsPath, fileName);

          if (existsSync(filePath) && statSync(filePath).isFile()) {
            const ext = path.extname(filePath).toLowerCase();
            const contentTypes: Record<string, string> = {
              '.png': 'image/png',
              '.jpg': 'image/jpeg',
              '.jpeg': 'image/jpeg',
              '.gif': 'image/gif',
              '.svg': 'image/svg+xml',
              '.ico': 'image/x-icon',
            };

            res.setHeader('Content-Type', contentTypes[ext] || 'application/octet-stream');
            res.setHeader('Access-Control-Allow-Origin', '*');

            const content = readFileSync(filePath);
            res.end(content);
            return;
          }
        }

        if (req.url === '/manifest.xml') {
          const manifestPath = path.resolve(__dirname, 'manifest.xml');
          if (existsSync(manifestPath)) {
            res.setHeader('Content-Type', 'application/xml');
            res.setHeader('Access-Control-Allow-Origin', '*');
            const content = readFileSync(manifestPath, 'utf-8');
            res.end(content);
            return;
          }
        }

        if (req.url === '/functions.json') {
          const functionsJsonPath = path.join(distPath, 'functions.json');
          if (existsSync(functionsJsonPath)) {
            res.setHeader('Content-Type', 'application/json');
            res.setHeader('Access-Control-Allow-Origin', '*');
            const content = readFileSync(functionsJsonPath, 'utf-8');
            res.end(content);
            return;
          }
        }

        if (req.url === '/taskpane.html') {
          req.url = '/taskpane/taskpane.html';
        } else if (req.url === '/commands.html') {
          req.url = '/commands/commands.html';
        } else if (req.url === '/functions.html') {
          req.url = '/functions/functions.html';
        } else if (req.url === '/dialogs/auth.html') {
          req.url = '/taskpane/dialogs/auth.html';
        }
        next();
      });
    },
    transformIndexHtml: {
      order: 'pre',
      handler(html: string, ctx: IndexHtmlTransformContext): string {
        if (ctx.path.includes('taskpane.html')) {
          const commandsScript = '<script type="module" src="/commands/commands.ts"></script>';
          const functionsScript = '<script type="module" src="/functions/functions.ts"></script>';
          const taskpaneScript = '<script type="module" src="/taskpane/index.tsx"></script>';

          if (!html.includes('commands.ts') && !html.includes('commands.js')) {
            html = html.replace('</head>', `\n ${commandsScript}\n ${functionsScript}\n ${taskpaneScript}\n </head>`);
          }
        }
        return html;
      },
    },
  };
};

const copyManifestPlugin = (isDev: boolean): Plugin => {
  const urlDev = 'https://localhost:3000/';
  const urlProd = 'https://contoso.com/';

  return {
    name: 'copy-manifest',
    writeBundle(): void {
      const manifestPath = path.resolve(__dirname, 'manifest.xml');
      const distManifestPath = path.resolve(__dirname, 'dist/manifest.xml');
      const assetsPath = path.resolve(__dirname, 'dist/assets');

      let content = readFileSync(manifestPath, 'utf-8');

      if (!isDev) {
        content = content.replace(new RegExp(urlDev, 'g'), urlProd);
      }

      if (existsSync(assetsPath)) {
        const files = readdirSync(assetsPath);
        const functionsJsFile = files.find((file) => file.match(/^functions-[a-zA-Z0-9]+\.js$/));

        if (functionsJsFile) {
          const functionsJsUrl = isDev ? `${urlDev}assets/${functionsJsFile}` : `${urlProd}assets/${functionsJsFile}`;

          content = content.replace(
            /<bt:Url id="Functions\.Script\.Url" DefaultValue="https:\/\/localhost:3000\/functions\.js"\/>/g,
            `<bt:Url id="Functions.Script.Url" DefaultValue="${functionsJsUrl}"/>`
          );
          content = content.replace(
            /<bt:Url id="Functions\.Script\.Url" DefaultValue="https:\/\/contoso\.com\/functions\.js"\/>/g,
            `<bt:Url id="Functions.Script.Url" DefaultValue="${functionsJsUrl}"/>`
          );
        }
      }

      writeFileSync(distManifestPath, content);
    },
  };
};

const copyAssetsPlugin = (): Plugin => {
  return {
    name: 'copy-assets',
    writeBundle(): void {
      const assetsDir = path.resolve(__dirname, 'assets');
      const distAssetsDir = path.resolve(__dirname, 'dist/assets');

      if (!existsSync(distAssetsDir)) {
        mkdirSync(distAssetsDir, { recursive: true });
      }

      const files = readdirSync(assetsDir);

      files.forEach((file: string) => {
        const srcPath = path.join(assetsDir, file);
        const destPath = path.join(distAssetsDir, file);
        if (statSync(srcPath).isFile()) {
          copyFileSync(srcPath, destPath);
        }
      });
    },
  };
};

export default defineConfig(async ({ mode }) => ({
  plugins: [
    react(),
    legacy({
      targets: ['ie >= 11', 'edge >= 18'],
      modernPolyfills: true,
      renderLegacyChunks: true,
      renderModernChunks: true,
    }),
    customFunctionsMetadataPlugin(),
    copyAssetsPlugin(),
    copyManifestPlugin(mode !== 'production'),
    moveHtmlToRootPlugin(),
    injectScriptsAndCleanupPlugin(),
    devServerRewritePlugin(),
  ],
  root: 'src',
  resolve: {
    alias: {
      // some alias here
    },
  },
  build: {
    sourcemap: true,
    rollupOptions: {
      input: {
        auth: path.resolve(__dirname, 'src/taskpane/dialogs/auth.html'),
        taskpane: path.resolve(__dirname, 'src/taskpane/taskpane.html'),
        commands: path.resolve(__dirname, 'src/commands/commands.html'),
        functions: path.resolve(__dirname, 'src/functions/functions.html'),
      },
      output: {
        entryFileNames: 'assets/[name]-[hash].js',
        chunkFileNames: 'assets/[name]-[hash].js',
        assetFileNames: (assetInfo): string => {
          if (assetInfo.name && assetInfo.name.endsWith('.css')) {
            return '[name][extname]';
          }
          return 'assets/[name]-[hash][extname]';
        },
      },
    },
    outDir: '../dist',
    emptyOutDir: true,
  },
  define: {
    // some .env variables here
  },
  server:
    mode !== 'production'
      ? {
          host: '0.0.0.0',
          https: await getHttpsOptions(),
          port: 3000,
          headers: {
            'Access-Control-Allow-Origin': '*',
          },
          fs: {
            strict: false,
          },
        }
      : {},
  preview: {
    host: '0.0.0.0',
    port: 3000,
    https: await getHttpsOptions(),
  },
}));