dotenv module not working like before in a react app

Question

I created a new react projet and then I added dotenv.

require('dotenv').config();

but I got this:

{{{

ERROR in ./node_modules/dotenv/lib/main.js 1:11-24

Module not found: Error: Can't resolve 'fs' in 'C:\...\project\node_modules\dotenv\lib'


ERROR in ./node_modules/dotenv/lib/main.js 3:13-28

Module not found: Error: Can't resolve 'path' in 'C:\...\project\node_modules\dotenv\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }


ERROR in ./node_modules/dotenv/lib/main.js 5:11-24

Module not found: Error: Can't resolve 'os' in 'C:\...\project\node_modules\dotenv\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
    - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "os": false }
}}}

Can someone help please?

Answer 1

Step 1

Install path-browserify, os-browserify and react-app-rewired

npm install path-browserify os-browserify react-app-rewired

Step 2

In your project root, create config-overrides.js file.

In this file, put this.

module.exports = function override (config, env) {
    console.log('override')
    let loaders = config.resolve
    loaders.fallback = {
        // existing configs...
        "fs": false,
        "os": require.resolve("os-browserify/browser"),
        "path": require.resolve("path-browserify"),
   }
    
    return config
}

Step 3

important !

Change "start": react-scripts start in your package.json to "start": react-app-rewired start

Now, restart your project.

npm start