Skip to content

Image Component with custom loader failed on Windows DEV environment with Turbopack setup #85429

@kangw3n

Description

@kangw3n

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/p6llq9

To Reproduce

  1. Install Nextjs 16 with default settings in Windows npx create-next-app@latest next-app --yes
  2. Create a custom loader for Image, e.g inside ./lib/image.ts, with simple return statement:
import type { ImageLoaderProps } from 'next/image';

export default function ImagePgw({
  src,
  width,
  quality,
}: ImageLoaderProps): string {
  return `https://my-custom-image/gw/photo.php?u=${src}&sl=W&fw=${width}&nt=1&q=${quality}`;
}

};

export default nextConfig;
  1. Configure next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  images: {
    loader: 'custom',
    loaderFile: './lib/image.ts',
  },
};

export default nextConfig;
  1. Run npm run dev

Current vs. Expected behavior

With above step recreation, nextjs with turbopack will throw Runtime Error:

Runtime Error

Image with src "/next.svg" is missing "loader" prop.
Read more: https://nextjs.org/docs/messages/next-image-missing-loader

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 32490
  Available CPU cores: 16
Binaries:
  Node: 20.19.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 16.0.0 // Latest available version is detected (16.0.0).
  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

It works well using webpack setup, and also work well on Linux/WSL with turbopack setting, it seems like there is some missing configuration on Windows Env, the above codesandbox work well, but i can't reproduce an example using Windows Env

Metadata

Metadata

Assignees

No one assigned

    Labels

    Image (next/image)Related to Next.js Image Optimization.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions