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

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

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 21
Comments: 18 (3 by maintainers)

Commits related to this issue

Set webpack logging config to error level and above This suppresses a ton of erroneous warnings. See https://github.com/vercel/next.js/issues/33693 and https://github.com/vercel/next.js/issues/27650. — committed to jenkinz/taxonomy by jenkinz a year ago
fix: webpack dynamic import warning related https://github.com/vercel/next.js/issues/33693 — committed to luwes/next-video by luwes 6 months ago
fix: import related bugs (#124) * fix: loading next.config.mjs if needed * fix: init output for esm next.config.mjs * fix: webpack dynamic import warning related https://github.com/vercel/next.js/... — committed to muxinc/next-video by luwes 6 months ago

Most upvoted comments

@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.

+12

vegandiet705 on Jul 17, 2023

https://github.com/webpack/webpack/issues/15574

sokra on Mar 28, 2022

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

PaisaDekho on Jul 17, 2023

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.

enigma0Z on Jan 18, 2023