[webpack.cache.PackFileCacheStrategy] error when using `next.config.mjs`

[iAdramelk]

Run next info (available from version 12.0.8 and up)

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:41 PST 2021; root:xnu-8019.61.5~1/RELEASE_ARM64_T6000
    Binaries:
      Node: 17.3.1
      npm: 8.3.0
      Yarn: 1.22.17
      pnpm: 6.27.1
    Relevant packages:
      next: 12.0.8
      react: 17.0.2
      react-dom: 17.0.2

But can be reproduced on Vercel builds using node@14.

What version of Next.js are you using?

12.0.8

What version of Node.js are you using?

17.3.1

What browser are you using?

Server error

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

When using esmodules via next.config.mjs, IF config contains custom webpack config AND IF there are some imports from the node system libraries like path or fs, webpack will start throwing cache warnings in dev and build modes.

Expected Behavior

No errors in the CLI and working cache.

To Reproduce

1. Create new project with yarn create next-app.
2. Rename config to next.config.mjs.
3. Paste the following code inside the config file:

import { resolve } from "path";

export default {
  webpack: (config) => config
};

Now, then you try to run the project, you will get the following warnings in the CLI:

<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'path' in '/Users/iadramelk/Projects/next-mjs-bug'
<w> while resolving 'path' in /Users/iadramelk/Projects/next-mjs-bug as file
<w>  at resolve esm file path
<w>  at file dependencies /Users/iadramelk/Projects/next-mjs-bug/next.config.mjs
<w>  at file /Users/iadramelk/Projects/next-mjs-bug/next.config.mjs
<w>  at resolve commonjs /Users/iadramelk/Projects/next-mjs-bug/next.config.mjs
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'path' in '/Users/iadramelk/Projects/next-mjs-bug'
<w> while resolving 'path' in /Users/iadramelk/Projects/next-mjs-bug as file
<w>  at resolve esm file path
<w>  at file dependencies /Users/iadramelk/Projects/next-mjs-bug/next.config.mjs
<w>  at file /Users/iadramelk/Projects/next-mjs-bug/next.config.mjs
<w>  at resolve commonjs /Users/iadramelk/Projects/next-mjs-bug/next.config.mjs

_NEXT-1395

[stefanprobst]

see #30870 (comment) for a tip how to silence the warnings.

[iAdramelk]

@stefanprobst thank for the tip! Will silence them until it is resolved.

[SimenB]

Webpack does this outside of next, might be better to file an issue in https://github.com/webpack/webpack?

[mrchief]

Webpack does this outside of next, might be better to file an issue in webpack/webpack?

There is webpack/webpack#14645

[FunctionDJ]

should be solved in latest webpack version. feel free to create repro.

- webpack/webpack#14645 (reply in thread)

I hope a Next.js update will raise the Webpack version to fix this 🙏

[SimenB]

This is still an issue in webpack 5.70, fwiw, so updating webpack won't help

[sokra]

webpack/webpack#15574

[sannajammeh]

Im getting [webpack.cache.PackFileCacheStrategy] Caching failed for pack: RangeError: Array buffer allocation failed after periods of either idle or a few hours of developing. Worst case the entire process crashes with Node being unable to garbage collect.