[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

[stefanprobst]

see https://github.com/vercel/next.js/discussions/30870#discussioncomment-1862620 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 https://github.com/webpack/webpack/discussions/14645

[FunctionDJ]

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

- https://github.com/webpack/webpack/discussions/14645#discussioncomment-2203636

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

[SimenB]

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

[sokra]

https://github.com/webpack/webpack/issues/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.

[vankop]

this should be solved in https://github.com/webpack/webpack/pull/15611

[enigma0Z]

I'm just working on implementing next.js in my project (coming from create-react-app) and I'm seeing this everywhere in my project.

Running latest next.js (13.x.x) and whatever version of webpack that pulls in.

Could this be why I see some components not receiving their dynamic styles from Material UI's dynamic in-code styles --

export default function MyComponent() {
  const theme = useTheme()
  const styles = (theme: Theme) => ({
    FooStyle: {
      backgroundColor: 'white' // normally dark
      color: 'black' // normally white, dark mode
    }
  })
  const classes = styles(theme)

  return (
    <Box sx={{classes.FooStyle}}>Test Test</Box>
  )
}

In my code this yields a white box with white text. It works with the create-react-app framework I'm coming from, for what its worth.

[PaisaDekho]

hey is this issue got fixed i guess not because I'm still seeing this same error in my next js 13.4.9 app

[vegandiet705]

@PaisaDekho I also got this issue all of a sudden while developing my app, right after installing some packages related to authentication. Solved by killing the dev server, deleting the .next folder and launching the dev server again.

[haneenmahd]

In my case, removing the apprDir from experimental features in Next Config fixed this issue 👍🏼 !

[MakindeAhmed2110]

hey is this issue got fixed i guess not because I'm still seeing this same error in my next js 13.4.9 app

same here

[Asish-AP]

@PaisaDekho I also got this issue all of a sudden while developing my app, right after installing some packages related to authentication. Solved by killing the dev server, deleting the .next folder and launching the dev server again.

Hey @vegandiet705 i tried removing the .next folder and then again building the project but was unable to solve the issue

[aligajani]

@Asish-AP Any luck? Having same issue.

[RahulShilam]

@Asish-AP Any luck? Having same issue.

Delete Next Folder in your app and try re-running your app, it worked for me...

[aligajani]

What worked for me was deleting the TS config file too, alongside the below

Ali Gajani Founder at Mr. Geek www.mrgeek.me www.aligajani.com

On Sun, Mar 3, 2024 at 4:09 PM RahulShilam @.***> wrote:

@Asish-AP https://github.com/Asish-AP Any luck? Having same issue.

Delete Next Folder in your app and try re-running your app, it worked for me...

— Reply to this email directly, view it on GitHub https://github.com/vercel/next.js/issues/33693#issuecomment-1975208888, or unsubscribe https://github.com/notifications/unsubscribe-auth/AANGRWXLDGGYPCUC7ICUFX3YWNDMTAVCNFSM5M3DTTN2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJXGUZDAOBYHA4A . You are receiving this because you commented.Message ID: <vercel/next. @.***>