strapi-to-lokalise-plugin/admin/vite.config.js

Preview and sync Lokalise translations from Strapi admin

const { mergeConfig } = require('vite');
const path = require('path');

/**
 * Universal Vite configuration for Strapi plugin admin panel
 * Works with both Strapi v4.x (webpack) and Strapi v5.x (vite)
 * 
 * This config ensures:
 * - React and React-DOM are externalized (not bundled)
 * - All Strapi packages are externalized
 * - Prevents "Invalid element type" errors
 * - Prevents dependency conflicts
 */
module.exports = (config, env) => {
  // Common external dependencies that should NEVER be bundled
  const externalDependencies = [
    'react',
    'react-dom',
    '@strapi/strapi',
    '@strapi/plugin-i18n',
  ];

  // Base configuration
  const pluginConfig = {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
    optimizeDeps: {
      exclude: externalDependencies,
    },
  };

  // Add build configuration for Vite (Strapi v5)
  if (config.build) {
    pluginConfig.build = {
      ...config.build,
      rollupOptions: {
        ...config.build?.rollupOptions,
        external: (id) => {
          // Externalize all Strapi packages
          if (id.startsWith('@strapi/')) {
            return true;
          }
          
          // Externalize React
          if (id === 'react' || id === 'react-dom' || id.startsWith('react/')) {
            return true;
          }
          
          // Externalize common dependencies
          if (externalDependencies.includes(id)) {
            return true;
          }
          
          return false;
        },
        output: {
          ...config.build?.rollupOptions?.output,
          globals: {
            react: 'React',
            'react-dom': 'ReactDOM',
            '@strapi/strapi': 'Strapi',
          },
        },
      },
      // Don't minify in development for better error messages
      minify: env?.mode === 'production' ? 'esbuild' : false,
    };
  }

  return mergeConfig(config, pluginConfig);
};