Module not found: Can't resolve 'fs' error [Solved]

avatar
Borislav Hadzhiev

Last updated: Oct 28, 2022
3 min

banner

# Module not found: Can't resolve 'fs' error [Solved]

The error "Module not found: Error: Can't resolve 'fs'" occurs because there has been a breaking change in Webpack version 5.

To solve the error, set the browser.fs property to false in your package.json file.

module not found error cant resolve fs

The first thing you should try is to set the browser.fs property to false in your package.json file.

package.json
{ "dependencies": {}, "devDependencies": {}, // ๐Ÿ‘‡๏ธ add this to package.json ๐Ÿ‘‡๏ธ "browser": { "fs": false, "os": false, "path": false } }

set browser fs property to false in package json

Add the browser object to your package.json file as shown in the code sample.

fs is a Node.js core module and should most likely not be bundled with your client-side code.

By setting fs, os and path to false, we use an empty module instead of including a polyfill for the fs module.

If your error is resolved, you don't have to do anything else.

If the error persists, try to edit your webpack.config.js file.

webpack.config.js
module.exports = function (webpackEnv) { // ... return { // ... resolve: { // ... fallback: { // ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ add this ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ "fs": false, "os": false, "path": false, } } } }
You can try to CTRL + F for resolve: if your webpack.config.js file is cluttered and long.

If you use Create React App, you might have to edit your node_modules/react-scripts/config/webpack.config.json file.

Alternatively, you can run the npm run eject command, but it is a one-way operation.

Once you run the command, you can't go back.

The command removes the single-build dependency from your project and copies the configuration files into your project as dependencies in package.json.

shell
npm run eject

Once you run the npm run eject command, a config directory is created.

The config directory contains a webpack.config.js file that you should edit.

Open your config/webpack.config.js file and add a fallback to your resolve.fallback property.

config/webpack.config.js
module.exports = function (webpackEnv) { // ... return { // ... resolve: { // ... fallback: { // ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ add this ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ "fs": false, "os": false, "path": false, } } } }

If the error is not resolved and you use Next.js, you might be trying to use the fs module in code that is run on the browser.

# Module not found: Can't resolve 'fs' error in Next.js

If you use the Node.js built-in fs module in your Next.js application, you have to be sure to only use it on the server.

You can use fs in your getStaticProps and getServerSideProps.

If you use the Node.js (server-side) fs module outside of the getStaticProps, getStaticPaths and getServerSideProps methods, the error occurs.

example.js
import fs from 'fs'; // โ›”๏ธ CAN'T use fs here โ›”๏ธ export const getServerSideProps = async () => { // โœ… Can use fs here (runs only on the server) console.log(fs) return { props: {}, // will be passed to the page component as props } };

If you use the fs module in your code, remove the browser.fs property from your package.json file if you've set it to false.

If you don't use the fs module in your code, create a next.config.js file in your project's root directory (next to your package.json file) and add the following code.

next.config.js
// ๐Ÿ‘‡๏ธ assumes you use Webpack 5 module.exports = { webpack5: true, webpack: config => { config.resolve.fallback = { fs: false, }; return config; }, };

If you have an existing next.config.js file and still use Webpack version 4, edit your config to look as follows.

next.config.js
// ๐Ÿ‘‡๏ธ assumes you use Webpack 4 module.exports = { webpack: (config, {isServer}) => { if (!isServer) { config.node = { fs: 'empty', }; } return config; }, };

If you get an error such as "Module not found: Can't resolve 'path'" or "Module not found: Can't resolve 'abc'", you would have to add a path or an abc property to your config object just like we did for the fs property.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev