DEV Community

Marcin Wosinek
Marcin Wosinek

Posted on • Edited on

webpack 5 & next.js 10 - how to add resolve fallback to config

#webpack #nextjs #javascript

Have you ever got:


    error - <some-3rd-party-lib>:0

    Module not found: Can't resolve 'fs' // or process, Buffer, etc.
Enter fullscreen mode Exit fullscreen mode

error in your nextjs app; and the all the solutions on stack overflow were pointing to something like:

// webpack.config.js
{
  resolve: {
        fallback: { "fs": false }
  }
}
Enter fullscreen mode Exit fullscreen mode

when you didn't even have webpack.config.js?

Quick solution

It's all because nextjs is hiding its webpack configuration. It's simplifying for most use cases, but a bit of a pain in some others. The quick solution for it is to this into next.config.js:

module.exports = {
  future: {
    webpack5: true,
  },
  webpack: (config) => {
    config.resolve.fallback = { fs: false };

    return config;
  },
};
Enter fullscreen mode Exit fullscreen mode

Longer overview

Links

Top comments (6)

Collapse
 
daveybrown profile image
daveybrown •

If you do this then you don't overwrite the existing fallback

config.resolve.fallback = {
  ...config.resolve.fallback,
  fs: false
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
evoratec profile image
Juan Antonio Navarro •

Thanks a lot.

Collapse
 
daveybrown profile image
daveybrown • • Edited

No worries :)

Collapse
 
bigless27 profile image
Ryan Lesson • • Edited

Had to create an account to thank you for this!!! Everything on Stack Overflow is incorrect.

Collapse
 
daveybrown profile image
daveybrown •

Agreed .. it's a nice blog series, and this one was especially useful, as I couldn't really find much else on the subject.

Collapse
 
harishkurup profile image
harish kurup •

Hi Did the same thing but still getting the following error
ERROR in ./node_modules/dotenv/lib/main.js 24:11-24
Module not found: Error: Can't resolve 'fs'

My webpack config
module.exports = {
resolve: {
fallback: {
fs: false,
"path": require.resolve("path-browserify"),
"os": require.resolve("os-browserify/browser")
}
}
};

Read next

arindam_1729 profile image

Building a Kanban Board with Next.js,Vercel AI and Tolgee

Arindam Majumder -

usluer profile image

Building a High-Performance Cache Manager in Node.js with TypeScript and ioredis

... -

ayusharpcoder profile image

ReactJS Best Practices: Writing Clean and Maintainable Code

Ayush Kumar Vishwakarma -

anwarhossain1 profile image

Why Strong DSA Knowledge is Essential for Software Engineers

Anwar Hossain -