banner_studio/apps/web/next.config.mjs

// Next.js config. Two webpack concerns:
//
// 1. dropflow's Node entry tries to `require('canvas')`. We don't need canvas
//    (we only use the wasm layout path). Mark it external + ignored.
//
// 2. The API route imports the Node dropflow build, and the export route
//    pulls in Playwright. Keep dropflow, the Anthropic SDK, and Playwright
//    out of the server-side bundle to avoid native-binding warnings and
//    webpack's failed module traces.

import path from 'node:path';
import { fileURLToPath } from 'node:url';
import fs from 'node:fs';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

// Load repo-root .env. Next normally reads .env from the app dir (apps/web),
// but the slice keeps the API key at the monorepo root so it's shared. Walk
// up and parse it ourselves — minimal, no dotenv dep.
(function loadRepoRootEnv() {
  const envPath = path.join(__dirname, '..', '..', '.env');
  if (!fs.existsSync(envPath)) return;
  const text = fs.readFileSync(envPath, 'utf8');
  for (const line of text.split('\n')) {
    const m = line.match(/^\s*([A-Z_][A-Z0-9_]*)\s*=\s*(.*?)\s*$/);
    if (!m) continue;
    const [, k, v] = m;
    if (!(k in process.env)) process.env[k] = v.replace(/^["']|["']$/g, '');
  }
})();

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  transpilePackages: [
    '@banner-studio/types',
    '@banner-studio/layout-engine',
    '@banner-studio/api-lib',
    '@banner-studio/prompts'
  ],
  experimental: {
    // Don't try to bundle these for the server runtime; require them at runtime.
    serverComponentsExternalPackages: [
      '@anthropic-ai/sdk',
      'dropflow',
      // playwright pulls in chromium-bidi via dynamic CJS requires that
      // webpack can't trace; keep it out of the bundle so Node resolves it
      // at runtime inside the /api/export route.
      'playwright',
      'playwright-core',
      'chromium-bidi',
      'jszip',
      '@banner-studio/render-worker'
    ]
  },
  webpack(config, { isServer }) {
    // asyncWebAssembly: dropflow ships a .wasm file we load via fetch; this
    // also enables webpack's async-module semantics for any wasm-importing
    // chain.
    //
    // topLevelAwait: REQUIRED. dropflow's wasm.js has
    //   const buffer = await environment.wasmLocator();
    // at top level. Without this flag, webpack treats wasm.js as a regular
    // sync module and the top-level await fires at module-evaluation time,
    // BEFORE our `await import('dropflow')` can run the locator setup.
    // With the flag on, wasm.js is an async module; `await import('dropflow')`
    // properly waits for the wasm bundle to resolve, and our pre-import
    // call to ensureBrowserLocator() runs first.
    config.experiments = {
      ...config.experiments,
      asyncWebAssembly: true,
      topLevelAwait: true
    };

    if (isServer) {
      // dropflow's Node env optionally requires `canvas` (a native dep we
      // don't use). Tell webpack it's external so it stays an `import()` call
      // resolved at runtime by Node, where the optional require can simply
      // fail without breaking the build.
      //
      // Also externalize dropflow itself. Its environment-node.js does
      // `readFileSync(new URL('../dropflow.wasm', import.meta.url))`. Webpack
      // rewrites `import.meta.url` to a path that breaks the URL constructor
      // contract `readFileSync` expects. Easier than patching webpack's
      // rewrite: keep dropflow out of the bundle entirely and let Node
      // resolve it at runtime where `import.meta.url` is the real file URL.
      config.externals = [
        ...(Array.isArray(config.externals) ? config.externals : [config.externals]),
        { canvas: 'commonjs canvas' },
        ({ request }, cb) => {
          if (request === 'dropflow' || request?.startsWith('dropflow/')) {
            return cb(null, 'module ' + request);
          }
          // Playwright and its native helpers must resolve at runtime; webpack
          // can't trace its dynamic requires and tries to bundle chromium-bidi
          // CJS subpaths that aren't exported.
          if (
            request === 'playwright' ||
            request?.startsWith('playwright/') ||
            request === 'playwright-core' ||
            request?.startsWith('playwright-core/') ||
            request === 'chromium-bidi' ||
            request?.startsWith('chromium-bidi/') ||
            request === '@banner-studio/render-worker' ||
            request?.startsWith('@banner-studio/render-worker/')
          ) {
            return cb(null, 'module ' + request);
          }
          cb();
        }
      ];
    } else {
      // Client bundles never need 'canvas'.
      config.resolve.fallback = {
        ...config.resolve.fallback,
        canvas: false
      };
    }

    return config;
  },
  async headers() {
    return [
      {
        source: '/dropflow.wasm',
        headers: [{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' }]
      },
      {
        source: '/fonts/(.*)',
        headers: [{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' }]
      }
    ];
  }
};

export default nextConfig;