Resolving Unexpected Output Path Errors in Vercel Deployments

(edited)

12  "version": 2,34  "builds": \[56    {78      "src": "package.json",910      "use": "@vercel/static-build",1112      "config": {1314        "distDir": "\_site"1516      }1718    }1920  \],2122  "rewrites": \[2324    {2526      "source": "/api/:path\*",2728      "destination": "/src/views/api/:path\*.js"2930    },3132    {3334      "source": "/product/:uid",3536      "destination": "/index.html"3738    },3940    {4142      "source": "/(.\*)",4344      "destination": "/index.html"4546    }4748  \],4950  "headers": \[5152    {5354      "source": "/index.html",5556      "headers": \[5758        {5960          "key": "Cache-Control",6162          "value": "no-store, no-cache, must-revalidate"6364        },6566        {6768          "key": "Pragma",6970          "value": "no-cache"7172        },7374        {7576          "key": "Expires",7778          "value": "0"7980        }8182      \]8384    }8586  \]8788}8990import path from "path";9192import fs from "fs";9394import htmlmin from "html-minifier";9596import EleventyVitePlugin from "@11ty/eleventy-plugin-vite";9798import pluginPug from "@11ty/eleventy-plugin-pug";99100101102export default function (*eleventyConfig*) {103104  // Temp folder for Vite105106  const tempFolder = ".11ty-vite";107108  if (!*fs*.existsSync(tempFolder)) *fs*.mkdirSync(tempFolder, { recursive: true });109110111112  // Plugins113114  *eleventyConfig*.addPlugin(pluginPug);115116117118  *eleventyConfig*.addPlugin(EleventyVitePlugin, {119120    tempFolderName: tempFolder,121122    viteOptions: {123124      root: "src",125126      publicDir: "public",127128      build: {129130        outDir: path.resolve(process.cwd(), ".11ty-vite"), // <- add this131132        emptyOutDir: true,133134        rollupOptions: {135136          input: {},137138        },139140      },141142    }143144145146  });147148149150  // Passthrough copy151152  *eleventyConfig*.addPassthroughCopy("public");153154  *eleventyConfig*.addPassthroughCopy("src/fonts");155156  *eleventyConfig*.addPassthroughCopy("src/app");157158159160161  // HTML minify162163  *eleventyConfig*.addTransform("htmlmin", (*content*, *outputPath*) => {164165    if (*outputPath* && *outputPath*.endsWith(".html")) {166167      return htmlmin.minify(*content*, {168169        useShortDoctype: true,170171        removeComments: true,172173        collapseWhitespace: true,174175      });176177    }178179    return *content*;180181  });182183184185  // Directory config186187  return {188189    dir: {190191      input: "src/views",192193      output: "\_site",194195      includes: "\_includes",196197      data: "\_data",198199    },200201    passthroughFileCopy: true,202203    htmlTemplateEngine: "pug",204205    pathPrefix: "/", // important for root-relative links206207  };208209};  "scripts": {210211    "prebuild": "mkdir -p .11ty-vite && rimraf \_site",212213    "build:vercel": "pnpm run prebuild && npx eleventy --config=.eleventy-build.js",214215    "vercel-build": "pnpm run build:vercel",216217    "build:win": "powershell -ExecutionPolicy Bypass -File build.ps1",218219    "dev": "eleventy --config=.eleventy.js --serve --incremental",220221    "clean": "rimraf \_site .11ty-vite"222223  },

I dont understand why I keep getting this error Error: Unexpected output path (was not in output directory \_site): ./\_site/about/index.html

Vercel Alum

Hi, ! Welcome to the Vercel Community.

It looks like the issue comes from how Eleventy and Vite are handling their output directories. Right now, you have a mismatch:

Eleventy outputs to _site
Vite outputs to .11ty-vite

This conflict prevents Vercel from picking up the correct build output.

Try updating your Eleventy config so that Vite builds to the same directory as Eleventy:

1_eleventyConfig_.addPlugin(EleventyVitePlugin, {2  tempFolderName: tempFolder,3  viteOptions: {4    root: "src",5    publicDir: "public",6    build: {7      outDir: path.resolve(process.cwd(), "_site"), // Match Eleventy output8      emptyOutDir: false, // Prevents Eleventy files from being deleted9      rollupOptions: {10        input: {},11      },12    },13  },14});

If that doesn't work, try removing the custom outDir from your config and let EleventyVitePlugin handle it automatically.

Thanks, I tried both solutions also tried removing the with removing the “outDir: path.resolve(process.cwd(), '_site')”, couldn’t get it to work though still the same error : import path from 'path';

import fs from 'fs';

import htmlmin from 'html-minifier';

import EleventyVitePlugin from '/eleventy-plugin-vite';

import pluginPug from '/eleventy-plugin-pug';

export default function (eleventyConfig) {

// --- Ensure temp folder exists ---

const tempFolder = '.11ty-vite';

if (!fs.existsSync(tempFolder)) fs.mkdirSync(tempFolder, { recursive: true });

// --- Server ---

eleventyConfig.setServerOptions({ port: 3000 });

// --- Plugins ---

eleventyConfig.addPlugin(pluginPug);

eleventyConfig.addPlugin(EleventyVitePlugin, {

1tempFolderName: tempFolder,23viteOptions: {45  root: 'src',67  publicDir: 'public',89  build: {10111213    outDir: path.resolve(process.cwd(), '\_site'),1415    emptyOutDir: false, 1617    rollupOptions: {1819      input: {}, 2021    },2223  },2425  css: {2627    preprocessorOptions: {2829      scss: {3031        additionalData: \`@import "@styles/utils/variables.scss";\`,3233      },3435    },3637  },3839  resolve: {4041    alias: {4243      '@styles': path.resolve(process.cwd(), 'src/styles'),4445      '@app': path.resolve(process.cwd(), 'src/app'),4647      '@utils': path.resolve(process.cwd(), 'src/app/utils'),4849      '@components': path.resolve(process.cwd(), 'src/app/components'),5051      '@shaders': path.resolve(process.cwd(), 'src/app/shaders'),5253      '@classes': path.resolve(process.cwd(), 'src/app/classes'),5455      '@animations': path.resolve(process.cwd(), 'src/app/animations'),5657      '@pages': path.resolve(process.cwd(), 'src/app/pages'),5859    },6061  },6263},

});

// --- Passthrough copy ---

eleventyConfig.addPassthroughCopy('public');

eleventyConfig.addPassthroughCopy('src/app');

eleventyConfig.addPassthroughCopy('src/fonts');

eleventyConfig.addPassthroughCopy('src/styles');

eleventyConfig.setServerPassthroughCopyBehavior('copy');

// --- HTML minify ---

eleventyConfig.addTransform('htmlmin', (content, outputPath) => {

1if (*outputPath* && *outputPath*.endsWith('.html')) {23  return htmlmin.minify(*content*, {45    useShortDoctype: true,67    removeComments: true,89    collapseWhitespace: true,1011  });1213}1415return *content*;

});

// --- Return directory config ---

return {

1dir: {23  input: 'src/views/',45  output: '\_site',67  includes: '\_includes',89  data: '\_data',1011},1213passthroughFileCopy: true,1415htmlTemplateEngine: 'pug',

};

Hi ! 🔔

This thread's been quiet for a while. If you're still facing issues, please share any relevant details (logs, screenshots, error messages) so we can take another look!