Custom image loader does not work on Windows

[damianfrizzi]

Link to the code that reproduces this issue

https://github.com/damianfrizzi/next-windows-image-loader-bug

To Reproduce

1. bun install
2. bun run dev
3. Page crashes with error on Windows

Current vs. Expected behavior

The globally defined custom image loader works on MacOS but not on Windows.
On Windows the following error appears:

\next-windows-image-loader-bug\.next\dev\server\chunks\ssr\node_modules_e6f2a25f._.js: Invalid source map. Only conformant source maps can be used to find the original code. Cause: Error: sourceMapURL could not be parsed
 ⨯ Error: Image with src "https://example.com/someimage.jpg" is missing "loader" prop.
Read more: https://nextjs.org/docs/messages/next-image-missing-loader
    at ignore-listed frames {
  digest: '2389313161'
}

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 65014
  Available CPU cores: 14
Binaries:
  Node: 24.11.1
  npm: 11.6.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 16.0.5 // Latest available version is detected (16.0.5).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Image (next/image)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[parthikjadav]

Hey everyone! I’ve opened a new issue to set up a small docs site for atron-js using Next.js + TypeScript.
If anyone wants to help build the basic structure (intro, installation, usage, etc.), feel free to pick it up.
Issue link: parthikjadav/atron-js#6
Thanks!

[rosbitskyy]

Fix: Windows Image Loader Path Normalization

Problem

On Windows, custom image loader configured via images.loaderFile in next.config.js was failing with the error:

Error: Image with src "..." is missing "loader" prop.

This occurred because:

• On Windows, absolute paths contain backslashes (\) instead of forward slashes (/)
• Webpack aliases expect forward slashes for module resolution
• The loaderFile path was not normalized before being used in webpack aliases
• Additionally, config.ts was incorrectly handling absolute paths by concatenating them instead of checking if they're already absolute

Solution

Changes Made

1. packages/next/src/build/create-compiler-aliases.ts

   • Added import of normalizePath utility function
   • Normalized config.images.loaderFile path before using it in webpack aliases
   • This ensures backslashes are converted to forward slashes on Windows

2. packages/next/src/server/config.ts

   • Added check for absolute paths using path.isAbsolute() before joining paths
   • Prevents path duplication when loaderFile is already an absolute path

3. Test Suite: test/integration/next-image-new/loader-config-windows/

   • Created new integration test to verify Windows-specific behavior
   • Tests that custom image loader works correctly with normalized paths
   • Includes tests for both development and production modes
   • Tests both Image component and getImageProps API

Testing

Manual Testing

1. On Windows:

   # Create a Next.js app with custom image loader
   mkdir test-app
   cd test-app
   npm init -y
   npm install next react react-dom
   
   # Create next.config.js
   echo "module.exports = {
     images: {
       loader: 'custom',
       loaderFile: './my-loader.js'
     }
   }" > next.config.js
   
   # Create custom loader
   echo "export default function myLoader({ src, width, quality }) {
     return \`\${src}?w=\${width}&q=\${quality || 75}\`
   }" > my-loader.js
   
   # Create a page using Image component
   mkdir pages
   echo "import Image from 'next/image'
   export default function Page() {
     return <Image src='/test.jpg' width={400} height={300} alt='Test' />
   }" > pages/index.js
   
   # Run dev server
   npm run dev

2. Verify:

   • The image should load without errors
   • The custom loader should be used (check network tab for loader URL format)
   • No "missing loader prop" errors should appear

Automated Testing

Run the integration test:

npm run testonly -- test/integration/next-image-new/loader-config-windows/test/index.test.ts

Or run all image loader tests:

npm run testonly -- test/integration/next-image-new/loader-config

Test Coverage

The new test suite covers:

• ✅ Development mode with Image component
• ✅ Production mode with Image component
• ✅ Development mode with getImageProps API
• ✅ Production mode with getImageProps API
• ✅ Custom loader function execution
• ✅ Path normalization on Windows (backslashes → forward slashes)

Files Changed

• packages/next/src/build/create-compiler-aliases.ts - Added path normalization
• packages/next/src/server/config.ts - Fixed absolute path handling
• test/integration/next-image-new/loader-config-windows/ - New test suite

Related Issue

Fixes #86614

[kangw3n]

I've created exact the same issue #85429,

Before opening a new issue, please check the existing ones first to avoid excessive duplication and unnecessary noise, which can cause maintainers/contributor to lose focus.
This also helps keep the project’s ecosystem clean and well-organized.