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

iAdramelk · 2022-01-26T14:01:42Z

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

Create new project with yarn create next-app.
Rename config to next.config.mjs.
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

The text was updated successfully, but these errors were encountered:

stefanprobst · 2022-01-27T08:11:35Z

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

iAdramelk · 2022-01-27T08:21:23Z

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

SimenB · 2022-03-08T16:28:20Z

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

mrchief · 2022-03-19T04:27:30Z

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

There is webpack/webpack#14645

FunctionDJ · 2022-03-27T13:36:08Z

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 · 2022-03-28T08:19:28Z

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

sokra · 2022-03-28T09:08:44Z

webpack/webpack#15574

sannajammeh · 2022-06-07T16:35:41Z

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 · 2022-08-02T12:33:26Z

this should be solved in webpack/webpack#15611

enigma0Z · 2023-01-18T01:14:52Z

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.

This suppresses a ton of erroneous warnings. See vercel/next.js#33693 and vercel/next.js#27650.

PaisaDekho · 2023-07-17T08:22:26Z

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 · 2023-07-17T17:33:16Z

@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 · 2023-07-25T15:24:06Z

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

Asish-AP · 2023-12-18T07:30:57Z

@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

related vercel/next.js#33693

* fix: loading next.config.mjs if needed * fix: init output for esm next.config.mjs * fix: webpack dynamic import warning related vercel/next.js#33693

aligajani · 2024-02-28T20:18:08Z

@Asish-AP Any luck? Having same issue.

RahulShilam · 2024-03-03T16:09:31Z

@Asish-AP Any luck? Having same issue.

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

aligajani · 2024-03-03T16:14:06Z

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 <#33693 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AANGRWXLDGGYPCUC7ICUFX3YWNDMTAVCNFSM5M3DTTN2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJXGUZDAOBYHA4A> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

samcx · 2024-04-30T14:44:05Z

This is supported now so closing this!

github-actions · 2024-05-15T00:04:19Z

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

iAdramelk added the bug Issue was opened via the bug report template. label Jan 26, 2022

balazsorban44 mentioned this issue Jan 27, 2022

<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Unable to snapshot resolve dependencies #27650

Closed

balazsorban44 added Webpack Related to Webpack with Next.js. kind: bug and removed bug Issue was opened via the bug report template. labels Jan 27, 2022

balazsorban44 changed the title ~~[webpack.cache.PackFileCacheStrategy] error then using next.config.mjs~~ [webpack.cache.PackFileCacheStrategy] error when using next.config.mjs Jan 27, 2022

schickling mentioned this issue Mar 28, 2022

Build dependencies failed at import and can't resolve 'path' contentlayerdev/contentlayer#129

Closed

jenkinz added a commit to jenkinz/taxonomy that referenced this issue Mar 4, 2023

Set webpack logging config to error level and above

ddbde0a

This suppresses a ton of erroneous warnings. See vercel/next.js#33693 and vercel/next.js#27650.

timneutkens added the linear: next Confirmed issue that is tracked by the Next.js team. label Jul 4, 2023

timneutkens mentioned this issue Jul 4, 2023

Change default log level for webpack cache #52190

Closed

This comment was marked as spam.

Sign in to view

luwes added a commit to luwes/next-video that referenced this issue Dec 19, 2023

fix: webpack dynamic import warning

4205120

related vercel/next.js#33693

heff pushed a commit to muxinc/next-video that referenced this issue Dec 19, 2023

fix: import related bugs (#124)

bd26dec

* fix: loading next.config.mjs if needed * fix: init output for esm next.config.mjs * fix: webpack dynamic import warning related vercel/next.js#33693

samcx closed this as completed Apr 30, 2024

samcx removed the kind: bug label Apr 30, 2024

github-actions bot added the locked label May 15, 2024

github-actions bot locked as resolved and limited conversation to collaborators May 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

iAdramelk commented Jan 26, 2022 •

edited by padmaia

stefanprobst commented Jan 27, 2022

iAdramelk commented Jan 27, 2022

SimenB commented Mar 8, 2022

mrchief commented Mar 19, 2022

FunctionDJ commented Mar 27, 2022

SimenB commented Mar 28, 2022

sokra commented Mar 28, 2022

sannajammeh commented Jun 7, 2022

vankop commented Aug 2, 2022

enigma0Z commented Jan 18, 2023 •

edited

PaisaDekho commented Jul 17, 2023

vegandiet705 commented Jul 17, 2023 •

edited

haneenmahd commented Jul 25, 2023

This comment was marked as spam.

Asish-AP commented Dec 18, 2023

aligajani commented Feb 28, 2024

RahulShilam commented Mar 3, 2024

aligajani commented Mar 3, 2024 via email

samcx commented Apr 30, 2024

github-actions bot commented May 15, 2024

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

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

Comments

iAdramelk commented Jan 26, 2022 • edited by padmaia

Run next info (available from version 12.0.8 and up)

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

Expected Behavior

To Reproduce

stefanprobst commented Jan 27, 2022

iAdramelk commented Jan 27, 2022

SimenB commented Mar 8, 2022

mrchief commented Mar 19, 2022

FunctionDJ commented Mar 27, 2022

SimenB commented Mar 28, 2022

sokra commented Mar 28, 2022

sannajammeh commented Jun 7, 2022

vankop commented Aug 2, 2022

enigma0Z commented Jan 18, 2023 • edited

PaisaDekho commented Jul 17, 2023

vegandiet705 commented Jul 17, 2023 • edited

haneenmahd commented Jul 25, 2023

This comment was marked as spam.

Asish-AP commented Dec 18, 2023

aligajani commented Feb 28, 2024

RahulShilam commented Mar 3, 2024

aligajani commented Mar 3, 2024 via email

samcx commented Apr 30, 2024

github-actions bot commented May 15, 2024

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

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

iAdramelk commented Jan 26, 2022 •

edited by padmaia

Run `next info` (available from version 12.0.8 and up)

enigma0Z commented Jan 18, 2023 •

edited

vegandiet705 commented Jul 17, 2023 •

edited