Webpack error with 'sharp-win32-x64.node' binary file in Next.js project

Question

I'm encountering an error when trying to build my Next.js project. The error message mentions a problem with 'sharp-win32-x64.node', which seems to be related to the sharp module and binary files. I'm using Next.js with TypeScript, and I've already tried a few things to resolve the issue.

Error Message:

./node_modules/.pnpm/sharp@0.32.4/node_modules/sharp/build/Release/sharp-win32-x64.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Import trace for requested module:
./node_modules/.pnpm/sharp@0.32.4/node_modules/sharp/build/Release/sharp-win32-x64.node
./node_modules/.pnpm/sharp@0.32.4/node_modules/sharp/build/Release/ sync ^\.\/sharp\-.*\.node$
./node_modules/.pnpm/sharp@0.32.4/node_modules/sharp/lib/sharp.js
./node_modules/.pnpm/sharp@0.32.4/node_modules/sharp/lib/input.js
./node_modules/.pnpm/sharp@0.32.4/node_modules/sharp/lib/index.js
./src/utils/imageUtils.ts
./src/utils/uploaders/uploadSubCategory.ts
./src/utils/fileUpload.ts
./src/components/overview/HandleUpload.tsx
./src/models/overview/AddSubCategory.tsx
./app/(pages)/overview/page.tsx

Steps Taken: Installed url-loader package. Updated next.config.js as follows:

Code Files:

- next.config.js

// @ts-check

const webpack = require("webpack");

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  images: {
    domains: ["tailwindui.com", "images.unsplash.com", "uploadthing.com"],
  },
};

const i18n = {
  locales: ["en", "fr"],
  defaultLocale: "en",
};

module.exports = {
  ...nextConfig,
  i18n,
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.module.rules.push({
        test: /\/sharp\//,
        use: "ignore-loader",
      });
    }
    return config;
  },
};

- imageUtils.ts

import toFormat from "sharp";

async function convertToWebp(file: any) {
  try {
    const buffer = await toFormat(file).toFormat("webp").toBuffer();
    return new Blob([buffer], { type: "image/webp" });
  } catch (error) {
    console.error("Error converting to WebP:", error);
    return file;
  }
}

export default convertToWebp;

Additional Information:

Any help on resolving this issue would be greatly appreciated. Thanks in advance!

I tried installing the url-loader package and modifying my next.config.js to handle binary files. Specifically, I added the following lines to my next.config.js:

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
        test: //sharp//,
        use: 'ignore-loader',
      });
    return config;
  },
};

I expected that these changes would resolve the 'sharp-win32-x64.node' binary file error and allow my Next.js project to build successfully.

Webpack error with 'sharp-win32-x64.node' binary file in Next.js project

0 Answers0