Have you ever got:
error - <some-3rd-party-lib>:0
Module not found: Can't resolve 'fs' // or process, Buffer, etc.
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 }
}
}
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;
},
};
Longer overview
Top comments (6)
If you do this then you don't overwrite the existing fallback
Thanks a lot.
No worries :)
Had to create an account to thank you for this!!! Everything on Stack Overflow is incorrect.
Agreed .. it's a nice blog series, and this one was especially useful, as I couldn't really find much else on the subject.
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")
}
}
};