[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

Issue Analytics

State:
Created 2 years ago
Reactions:10
Comments:9 (3 by maintainers)

Top GitHub Comments

6reactions

sokracommented, Mar 28, 2022

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

0reactions

vankopcommented, Aug 2, 2022

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

Top Results From Across the Web

When updating Next.js v10.1.13 to webpack5, getting ...

PackFileCacheStrategy ] Caching failed for pack: Error: Can't resolve 'fsevents' in ... url: http://localhost:3000 info - Using webpack 5.

next.config.js: Introduction

mjs file in the root of your project directory (next to package.json ). next.config.js is a regular Node.js module, not a JSON file....

Cache

It's recommended to set cache.buildDependencies.config: [__filename] in your webpack configuration to get the latest configuration and all dependencies.

webpack/webpack - Gitter

I'm having an issue with persistent caching when used with multiple webpack ... PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file...

Customize your Next.JS App using next.config.js ... - YouTube

In this video, we will see how we can use the next. config.js file in our Next.JS applications to take our App to...