Build getting failed when deploying on vercel.

[keen ermine]

Hi @vocal igloo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The logs you shared stop at a warning, not at the actual error. The warning itself is expected with Next 15+ and is not what’s causing the build to fail.

From the docs for Next 16 (same behavior applies when Turbopack is used by default): if a custom webpack configuration is present and you run a Turbopack build, the build will fail to avoid misconfiguration. [Upgrade v16]

Key points from the docs:

• Turbopack is now the default for next build.
• If next.config.js has a webpack field, next build with Turbopack will fail.
• You have three options:
  1. Use Turbopack and ignore webpack config: next build --turbopack (but any webpack config is ignored).
  2. Migrate your webpack config to Turbopack using the turbopack option in next.config. [turbopack config]
  3. Opt out of Turbopack and keep Webpack: run next build --webpack. [Upgrade v16]

On Vercel, to keep using Webpack (and avoid this failure):

1. In your package.json, set the build script to:

   {
     "scripts": {
       "build": "next build --webpack"
     }
   }
   

2. Push this change and redeploy.

If you want to use Turbopack instead, remove or migrate any webpack config from next.config.js to the turbopack option as described in the docs. [turbopack option]

If the build still fails, open the Vercel deployment’s Build Logs and scroll below the warning to find the first red Error line; that line will show the real cause. [Troubleshoot builds]

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@vocal igloo Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[vocal igloo]

@keen ermine I want to use turbopack.. this is what my next.config.ts is:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // Optimize for production
  reactStrictMode: true,

  // Reduce build output
  compress: true,

  // Image optimization
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'lh3.googleusercontent.com',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'utfs.io',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'uploadthing.com',
        port: '',
        pathname: '/**',
      },
    ],
  },

  // Environment variables available to the browser
  env: {
    NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000',
  },

  // Webpack configuration
  webpack: (config, { isServer }) => {
    // Fixes for Socket.IO in production
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        net: false,
        tls: false,
        fs: false,
      };
    }
    return config;
  },
};

export default nextConfig;

can you update it so that it works

[keen ermine]

Let me check the knowledge base for you again. Give me one moment! :books:

---

You’re hitting the “Webpack is configured while Turbopack is not” problem because you have a webpack config but no equivalent turbopack config. With Turbopack, you need to move that fallback behavior into turbopack.resolveAlias instead of webpack.resolve.fallback. [turbopack config; Resolve alias fallback]

However, the official docs only show a supported pattern for fs (and similar Node core modules) using resolveAlias with a browser-specific replacement file, not for net/tls directly. [Resolve alias fallback; fs alias example]

Based on the docs and examples, here’s a Turbopack-compatible next.config.ts that:

• Keeps your existing options.
• Adds a turbopack section.
• Replaces fs in the browser with an empty module (same behavior as your Webpack fallback).
• Removes the webpack config so Turbopack can run.

You’ll also need an empty.ts file.

next.config.ts

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  reactStrictMode: true,
  compress: true,

  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'lh3.googleusercontent.com',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'utfs.io',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'uploadthing.com',
        port: '',
        pathname: '/**',
      },
    ],
  },

  env: {
    NEXT_PUBLIC_APP_URL:
      process.env.NEXT_PUBLIC_APP_URL || '<http://localhost:3000',>
  },

turbopack: {
resolveAlias: {
// Silence fs in client bundles, similar to webpack resolve.fallback
fs: {
browser: './empty.ts',
},
},
},
}

export default nextConfig

**empty.ts** (next to `next.config.ts`):

```ts
module.exports = {}

This pattern (using turbopack.resolveAlias to map fs to an empty module in the browser) is exactly what the official docs recommend as the Turbopack equivalent of webpack.resolve.fallback. [Resolve alias fallback; fs alias GitHub example]

For net and tls, the knowledge sources don’t provide explicit Turbopack examples, so I can’t confidently give a documented alias pattern for them. If your client-side code (or Socket.IO client) is importing modules that pull in net/tls, the recommended approach from the docs is to refactor so that browser bundles don’t reference Node core modules at all. [Resolve alias fallback]

After this change, commit and push, and Vercel should build with Turbopack without the Webpack-config warning.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@vocal igloo Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[vocal igloo]

The code you gave is not understable.. can you sent it without using ```

[vocal igloo]

@keen ermineThe code you gave is not understable.. can you sent it without using the discord code ```

[keen ermine]

Let me check the knowledge base for you again. Give me one moment! :books:

---

Here it is without fenced code blocks.

next.config.ts

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
reactStrictMode: true,
compress: true,

images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'lh3.googleusercontent.com',
port: '',
pathname: '/',
},
{
protocol: 'https',
hostname: 'utfs.io',
port: '',
pathname: '/',
},
{
protocol: 'https',
hostname: 'uploadthing.com',
port: '',
pathname: '/**',
},
],
},

env: {
NEXT_PUBLIC_APP_URL:
process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000',
},

turbopack: {
resolveAlias: {
// Silence fs in client bundles, similar to webpack resolve.fallback
fs: {
browser: './empty.ts',
},
},
},
}

export default nextConfig

This uses Turbopack’s resolveAlias to map fs to an empty module in browser builds, which is the documented replacement for webpack.resolve.fallback for Node core modules when using Turbopack. [Resolve alias fallback]

empty.ts (place this file next to next.config.ts):

module.exports = {}

This empty.ts file is the “empty module” that Turbopack will load instead of fs in the browser. [Resolve alias fallback]

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: