Updating from 13.3 > 13.4.7 I get BREAKING CHANGE: webpack < 5 issues | Next.js | Page 1

near sentinel Jun 22, 2023, 9:07 PM

#

The errors are originating from the nextjs file /node_modules/next/dist/compiled/gzip-size , and not from my personal code, nor installed deps.

And to confirm, rolling back to v13.3 these errors aren't present.

I've tried clearing cache, removing node_modules, fresh install with no change in the error.

Here is the full console error:

ERROR in ./node_modules/next/dist/compiled/gzip-size/index.js 1:2832-2845
Module not found: Error: Can't resolve 'fs' in '/Users/jake/Development/personal/elkli-and-hart/node_modules/next/dist/compiled/gzip-size'

ERROR in ./node_modules/next/dist/compiled/gzip-size/index.js 1:2878-2895
Module not found: Error: Can't resolve 'stream' in '/Users/jake/Development/personal/elkli-and-hart/node_modules/next/dist/compiled/gzip-size'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }

ERROR in ./node_modules/next/dist/compiled/gzip-size/index.js 1:2928-2943
Module not found: Error: Can't resolve 'zlib' in '/Users/jake/Development/personal/elkli-and-hart/node_modules/next/dist/compiled/gzip-size'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
    - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "zlib": false }

thorny thornBOT Jun 22, 2023, 9:07 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)

near sentinel Jun 22, 2023, 9:08 PM

#

I have followed the advice given in the error message to no avail.

#

I intsalled the browserify-zlib and stream-browserify packages as dev deps, and updated my next.config.js to look like this, following the advice from the error message:

require('dotenv').config();

module.exports = {
  reactStrictMode: true,
  publicRuntimeConfig: {
    SERVER_URL: process.env.PAYLOAD_PUBLIC_SERVER_URL,
  },
  images: {
    domains: ['localhost', 'elkli-and-hart'],
  },
  experimental: {
    scrollRestoration: true,
  },
  async redirects() {
    return [
      {
        source: '/checkout',
        destination: '/basket/checkout',
        permanent: true,
      },
      {
        source: '/homepage',
        destination: '/',
        permanent: true,
      },
      {
        source: '/collections/category',
        destination: '/collections',
        permanent: true,
      },
      {
        source: '/essays/category',
        destination: '/essays',
        permanent: true,
      },
      {
        source: '/journal/category',
        destination: '/journal',
        permanent: true,
      },
      {
        source: '/products/category',
        destination: '/products',
        permanent: true,
      },
      {
        source: '/email/order-confirmation',
        destination: '/',
        permanent: true,
      },
    ];
  },
  images: {
    domains: ['localhost', 'elkli-and-hart', '10.0.1.236'],
  },
  webpack(config, { isServer }) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    config.infrastructureLogging = {
      level: 'error',
    };
    config.resolve.fallback = {
      util: require.resolve('util/'),
      stream: require.resolve('stream-browserify'),
      zlib: require.resolve('browserify-zlib'),
      fs: false,
    };
    return config;
  },

#

I've also tried:

{
  ...
  webpack(config, { isServer }) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    config.infrastructureLogging = {
      level: 'error',
    };
    config.resolve.fallback = {
      util: require.resolve('util/'),
      stream: false,
      zlib: false,
    };
    return config;
  },
};

#

And:

{
  ...
  webpack(config, { isServer }) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    config.infrastructureLogging = {
      level: 'error',
    };
    config.resolve.fallback = {
      util: require.resolve('util/'),
    };
    if (!server) {
      config.resolve.fallback = {
        stream: require.resolve('stream-browserify'),
        zlib: require.resolve('browserify-zlib'),
        fs: false,
      };
    }
    return config;
  },
};

and this:

webpack(config, { isServer }) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    config.infrastructureLogging = {
      level: 'error',
    };
    config.resolve.fallback = {
      util: require.resolve('util/'),
    };
    if (!isServer) {
      config.resolve.fallback = {
        fs: false,
        stream: false,
        zlib: false,
      };
    }
    return config;
  },
};

#

All produce the same console error.

#

What has changed between 13.3 and 13.4.x (this error exists on the other 13.4.x versions also) that would cause this error to surface?

#

I've tried to add this to my package.json :

{
  ...
  "browser": {
    "fs": false,
    "stream": false,
    "zlib": false,
    "os": false,
    "path": false
  }
}

dire scarab Jun 22, 2023, 9:35 PM

#

do you still receive this error when removing the svgr rule?

near sentinel Jun 22, 2023, 9:36 PM

#

I'll try... on sec

#

Yes, the same error persists when I completely remove that like so:

{
  ...
  webpack(config, { isServer }) {
    config.infrastructureLogging = {
      level: 'error',
    };
    config.resolve.fallback = {
      util: require.resolve('util/'),
      fs: false,
      stream: false,
      zlib: false,
    };
    return config;
  },
};

#

Also tried completely removing the webpack method from the config. Same. Error.

dire scarab Jun 22, 2023, 9:48 PM

#

weird, it looks like you might be trying to use a server-side module somewhere in a place that is executed in the browser

#

so webpack fails to bundle these native dependencies

#

if you are able to create a reproduction project it would be very useful

near sentinel Jun 22, 2023, 9:49 PM

#

has anything fundamentally changed between 13.3 and 13.4 that might affect this? Cos as mentioned, this doesn't occur on 13.3

#

the file that is referrenced is this ERROR in ./node_modules/next/dist/compiled/gzip-size/index.js a nextjs file, and not from my own code, right?

dire scarab Jun 22, 2023, 9:52 PM

#

I can't think about a change that might have affected this, and yeah this is from an internal file which could indicate a bug from next.js itself

#

but you need to make a reproduction that works with 13.4 or at least breaks with 13.4.7 so they can give it a look

#

otherwise there isn't much we can help with since it would be all speculation of what might be wrong

near sentinel Jun 22, 2023, 9:54 PM

#

what would a reproduction example look like? essentially my whole codebase?

dire scarab Jun 22, 2023, 9:56 PM

#

a minimal repository just reproducting the issue, they have minimal projects for this in the examples folder:
app dir: https://github.com/vercel/next.js/tree/canary/examples/reproduction-template-app-dir
pages dir: https://github.com/vercel/next.js/tree/canary/examples/reproduction-template

#

if you code is open source then you might send it but its usually not the case so its easier to reproduce just what is failing with these templates so you can narrow down the potential problem

near sentinel Jun 22, 2023, 10:00 PM

#

i see - thanks. Where would you start in re-creating this?
Use my existing package.json, next.config.js and remove all the proprietary stuff?

dire scarab Jun 22, 2023, 10:06 PM

#

I would do this in this order:

try updating your next version to the latest canary and make sure it still doesn't work (npm i next@canary or yarn)
create a blank page in your project and check it still doesn't work
check what you have in _app or _document (if using the pages dir) and start removing stuff until it starts working again
check the middleware
start removing stuff from next.config.js

basically you want to narrow down what could be the issue so you can reproduce it in the other project. you can do all these tests with the new test page so you can remove your components from the equation and it greatly reduces the amount of work

near sentinel Jun 22, 2023, 10:12 PM

#

ok - thanks for the pointers, I'll try and reproduce on a clean page with no components (however this error occurs before any page even loads, but I understand the need to isolate). _app and _documents make sense to try this on tho 👍

near sentinel Jun 22, 2023, 10:46 PM

#

thought i'd try and incrementally install minor versions to see where this error starts, and unfortunately it doesn't seem possible to do because regardless which version of next I install, the lock files references 13.4.7, and therefore the error occurs. My currently lock file has all next deps set at 13.3.0.

You can see in this lock diff, that despite installing 13.3.1, the version and deps are 13.4.7 🤷‍♂️

thoughts on how to install minor versions without this happening?

#

cc @dire scarab

#Updating from 13.3 > 13.4.7 I get BREAKING CHANGE: webpack < 5 issues