diff --git a/.changeset/real-otters-unite.md b/.changeset/real-otters-unite.md new file mode 100644 index 000000000..5677e4517 --- /dev/null +++ b/.changeset/real-otters-unite.md @@ -0,0 +1,5 @@ +--- +"@opennextjs/aws": patch +--- + +fix(dev-overrides): make assets and imageLoader work with basePath diff --git a/packages/open-next/src/overrides/imageLoader/fs-dev.ts b/packages/open-next/src/overrides/imageLoader/fs-dev.ts index d9dd15df5..8d4b95476 100644 --- a/packages/open-next/src/overrides/imageLoader/fs-dev.ts +++ b/packages/open-next/src/overrides/imageLoader/fs-dev.ts @@ -1,13 +1,21 @@ import fs from "node:fs"; import path from "node:path"; +import { NextConfig } from "config/index"; import type { ImageLoader } from "types/overrides"; import { getMonorepoRelativePath } from "utils/normalize-path"; export default { name: "fs-dev", load: async (url: string) => { - const imagePath = path.join(getMonorepoRelativePath(), "assets", url); + const urlWithoutBasePath = NextConfig.basePath + ? url.slice(NextConfig.basePath.length) + : url; + const imagePath = path.join( + getMonorepoRelativePath(), + "assets", + urlWithoutBasePath, + ); const body = fs.createReadStream(imagePath); const contentType = url.endsWith(".png") ? "image/png" : "image/jpeg"; return { diff --git a/packages/open-next/src/overrides/wrappers/express-dev.ts b/packages/open-next/src/overrides/wrappers/express-dev.ts index f381f7e6c..ae2fcd6b4 100644 --- a/packages/open-next/src/overrides/wrappers/express-dev.ts +++ b/packages/open-next/src/overrides/wrappers/express-dev.ts @@ -1,6 +1,7 @@ import path from "node:path"; import express from "express"; +import { NextConfig } from "config/index"; import type { StreamCreator } from "types/open-next.js"; import type { WrapperHandler } from "types/overrides.js"; import { getMonorepoRelativePath } from "utils/normalize-path"; @@ -8,7 +9,11 @@ import { getMonorepoRelativePath } from "utils/normalize-path"; const wrapper: WrapperHandler = async (handler, converter) => { const app = express(); // To serve static assets - app.use(express.static(path.join(getMonorepoRelativePath(), "assets"))); + const basePath = NextConfig.basePath ?? ""; + app.use( + basePath, + express.static(path.join(getMonorepoRelativePath(), "assets")), + ); const imageHandlerPath = path.join( getMonorepoRelativePath(), @@ -17,7 +22,7 @@ const wrapper: WrapperHandler = async (handler, converter) => { const imageHandler = await import(imageHandlerPath).then((m) => m.handler); - app.all("/_next/image", async (req, res) => { + app.all(`${NextConfig.basePath ?? ""}/_next/image`, async (req, res) => { const internalEvent = await converter.convertFrom(req); const streamCreator: StreamCreator = { writeHeaders: (prelude) => {