nextjs - 💡(How to fix) Fix Image Component with custom loader failed on Windows DEV environment with Turbopack setup [4 comments, 5 participants]

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

TL;DR

• The issue can be resolved by ensuring the custom image loader is properly configured and recognized by Next.js in a Windows environment.

Guidance

• Verify that the next.config.ts file is correctly configured to use the custom image loader by checking the images.loader and images.loaderFile properties.
• Check the file path and name of the custom loader (./lib/image.ts) to ensure it matches the configuration in next.config.ts.
• Try to reproduce the issue in a minimal example using the same Next.js and Node.js versions to isolate the problem.
• Consider comparing the differences in configuration or environment between the working Linux/WSL setup and the non-working Windows setup.

Example

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  images: {
    loader: 'custom',
    loaderFile: './lib/image.ts', // Ensure this path is correct
  },
};

export default nextConfig;

Notes

• The issue seems to be specific to the Windows environment, as it works well on Linux/WSL with the same configuration.
• The provided codesandbox example works, which suggests that the issue might be related to the local environment or configuration.

Recommendation

• Apply workaround: Try to use a relative path or an absolute path for the loaderFile property in next.config.ts to ensure the custom loader is correctly loaded.