Next build error: Module not found when deploying to Pages

I’m trying to complete an initial deployment of a Next.js app to Cloudflare Pages using next-on-pages and Cloudflare’s Git integration. However, I’m running into a build failure that doesn’t happen to me locally when I use next dev or next build – it’s only happening when trying to deploy to Pages: the build is failing to find the background image sources.

A minimal example – FWIW, I’m using Next.js 14.2.2, and Tailwind 3.3.0:

Project structure:

[Project root]
|_public
   |_black_flamingo_posed.jpg
|_src
   |_app
      |_[locale]
         |_page.tsx

src/app/[locale]/page.tsx:

export default async function Home(params) {
  return (
    <section className="bg-center bg-no-repeat bg-[url('~/public/black_flamingo_posed.jpg')]">
      {/* Some content */}
    </section>
  );
}

The error:

17:48:15.569	▲  Failed to compile.
17:48:15.570	▲  ./src/app/[locale]/globals.css
17:48:15.570	▲  Module not found: Can't resolve '/public/black_flamingo_posed.jpg'
17:48:15.571	▲  
17:48:15.571	▲  https://nextjs.org/docs/messages/module-not-found
17:48:15.571	▲  
17:48:15.571	▲  Import trace for requested module:
17:48:15.572	▲  ./src/app/[locale]/globals.css
17:48:15.572	▲  
17:48:15.572	▲  ./src/app/[locale]/globals.css
17:48:15.572	▲  Module not found: Can't resolve '/public/sofar_preshow.jpg'
17:48:15.572	▲  
17:48:15.573	▲  https://nextjs.org/docs/messages/module-not-found
17:48:15.573	▲  
17:48:15.573	▲  Import trace for requested module:
17:48:15.573	▲  ./src/app/[locale]/globals.css
17:48:15.573	▲  
17:48:15.573	▲  ./src/app/[locale]/globals.css
17:48:15.573	▲  HookWebpackError: Cannot find module '/public/black_flamingo_posed.jpg'
17:48:15.574	▲     at tryRunOrWebpackError (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:312989)
17:48:15.574	▲     at __webpack_require_module__ (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:131165)
17:48:15.574	▲     at __nested_webpack_require_153728__ (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:130607)
17:48:15.574	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:131454
17:48:15.574	▲     at symbolIterator (/opt/buildhome/repo/node_modules/next/dist/compiled/neo-async/async.js:1:14444)
17:48:15.574	▲     at done (/opt/buildhome/repo/node_modules/next/dist/compiled/neo-async/async.js:1:14824)
17:48:15.574	▲     at Hook.eval [as callAsync] (eval at create (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:13:28858), <anonymous>:15:1)
17:48:15.574	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:130328
17:48:15.575	▲     at symbolIterator (/opt/buildhome/repo/node_modules/next/dist/compiled/neo-async/async.js:1:14402)
17:48:15.575	▲     at timesSync (/opt/buildhome/repo/node_modules/next/dist/compiled/neo-async/async.js:1:5027)
17:48:15.575	▲     at Object.eachLimit (/opt/buildhome/repo/node_modules/next/dist/compiled/neo-async/async.js:1:14208)
17:48:15.575	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:129889
17:48:15.575	▲     at symbolIterator (/opt/buildhome/repo/node_modules/next/dist/compiled/neo-async/async.js:1:14444)
17:48:15.576	▲     at done (/opt/buildhome/repo/node_modules/next/dist/compiled/neo-async/async.js:1:14824)
17:48:15.576	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:129140
17:48:15.576	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:109939
17:48:15.576	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:312825
17:48:15.576	▲     at _done (eval at create (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:13:28858), <anonymous>:9:1)
17:48:15.576	▲     at Hook.eval [as callAsync] (eval at create (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:13:28858), <anonymous>:39:22)
17:48:15.576	▲     at Cache.store (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:16097)
17:48:15.576	▲     at ItemCacheFacade.store (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:17341)
17:48:15.577	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:109926
17:48:15.577	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:15962
17:48:15.577	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:15523
17:48:15.577	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:539171
17:48:15.577	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:15992
17:48:15.577	▲     at eval (eval at create (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:13:28858), <anonymous>:30:1)
17:48:15.577	▲     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
17:48:15.577	▲  -- inner error --
17:48:15.577	▲  Error: Cannot find module '/public/black_flamingo_posed.jpg'
17:48:15.577	▲     at webpackMissingModule (/opt/buildhome/repo/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!/opt/buildhome/repo/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!/opt/buildhome/repo/src/app/[locale]/globals.css:6:50)
17:48:15.578	▲     at Module.<anonymous> (/opt/buildhome/repo/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!/opt/buildhome/repo/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!/opt/buildhome/repo/src/app/[locale]/globals.css:6:157)
17:48:15.578	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:922493
17:48:15.578	▲     at Hook.eval [as call] (eval at create (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:13:28636), <anonymous>:7:1)
17:48:15.579	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:131198
17:48:15.579	▲     at tryRunOrWebpackError (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:312943)
17:48:15.579	▲     at __webpack_require_module__ (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:131165)
17:48:15.579	▲     at __nested_webpack_require_153728__ (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:130607)
17:48:15.580	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:131454
17:48:15.580	▲     at symbolIterator (/opt/buildhome/repo/node_modules/next/dist/compiled/neo-async/async.js:1:14444)
17:48:15.580	▲     at done (/opt/buildhome/repo/node_modules/next/dist/compiled/neo-async/async.js:1:14824)
17:48:15.580	▲     at Hook.eval [as callAsync] (eval at create (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:13:28858), <anonymous>:15:1)
17:48:15.580	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:130328
17:48:15.580	▲     at symbolIterator (/opt/buildhome/repo/node_modules/next/dist/compiled/neo-async/async.js:1:14402)
17:48:15.580	▲     at timesSync (/opt/buildhome/repo/node_modules/next/dist/compiled/neo-async/async.js:1:5027)
17:48:15.580	▲     at Object.eachLimit (/opt/buildhome/repo/node_modules/next/dist/compiled/neo-async/async.js:1:14208)
17:48:15.580	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:129889
17:48:15.581	▲     at symbolIterator (/opt/buildhome/repo/node_modules/next/dist/compiled/neo-async/async.js:1:14444)
17:48:15.581	▲     at done (/opt/buildhome/repo/node_modules/next/dist/compiled/neo-async/async.js:1:14824)
17:48:15.581	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:129140
17:48:15.581	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:109939
17:48:15.581	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:312825
17:48:15.581	▲     at _done (eval at create (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:13:28858), <anonymous>:9:1)
17:48:15.581	▲     at Hook.eval [as callAsync] (eval at create (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:13:28858), <anonymous>:39:22)
17:48:15.581	▲     at Cache.store (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:16097)
17:48:15.581	▲     at ItemCacheFacade.store (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:17341)
17:48:15.581	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:109926
17:48:15.582	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:15962
17:48:15.582	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:15523
17:48:15.582	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:539171
17:48:15.582	▲     at /opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:28:15992
17:48:15.582	▲     at eval (eval at create (/opt/buildhome/repo/node_modules/next/dist/compiled/webpack/bundle5.js:13:28858), <anonymous>:30:1)
17:48:15.582	▲     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
17:48:15.582	▲  

(I have a couple other spots that use assets in the public folder as background images, and those are producing the same error.)

Any help is greatly appreciated!

Figured this out: my git settings apparently ignored a change in case for the file extension of the files in question, so while my local copy of the repository had files with names matching the code, the remote repository did not. Fixing the casing in the remote repo fixed the issue.