Nextjs 14.1 Build Errors Module not found : "fs" (not noticed in 14.0.3)

[prasad-pul]

Summary

My (Nextjs) project has a dependency on a external package which exports mostly browser compatible code but also exports some utility function that depend on some nodejs specific modules (for e.g. "fs").

This external package is being imported into both client & server components.

I am currently using Nextjs version 14.0.3 and the production build (next build) runs fine without any errors.

But if I upgrade to Nextjs version 14.1.0 I started seeing build errors : Module not found: "fs".

I tried different options:

• Making the client component that imports this external package dynamic with ssr: false
• changing the webpack in next.config : setting webpack.resolve.fallback: {fs: false}

But none of these changes seem to help.

Anything changed with the Webpack resolution in Nextjs 14.1 ??

Additional information

No response

Example

No response

[prasad-pul]

For anyone curious, I was able to fix this issue with this hack from earlier post:

The key thing to note here is using typeof nextRuntime === "undefined" and NOT isServer option ( I tried this and it doesn't help!)

It's interesting that I didn't have to do this (modify webpack config) in 14.0.3 but I have to do it for 14.1.0 🤔

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config, { nextRuntime }) => {
    if (typeof nextRuntime === "undefined") {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false,
        net: false,
        tls: false,
      };
    }
    config.externals.push("pino-pretty", "lokijs", "encoding");
    return config;
  },
};

module.exports = nextConfig;