Dotenv issues/error with create-react-app react-scripts

Question

I keep getting this error in my react app

    Compiled with problems: X

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

    Module not found: Error: Can't resolve 'fs' in 'C: \Users\USER\Desktop\dapps\nefty\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: \Users\USER\Desktop\dapps\nefty\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: \Users\USER\Desktop\dapps\nefty\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 }

I after tried following the instruction provided by creating webpack.config.js and adding the fallback as show below

module.exports = {
    resolve: {
        fallback: { "path": require.resolve("path-browserify")  },
    },
}

There is no difference. I checked a similar issue on their github page and couldn't find a working fix(most were comments emphasizing the problem that didn't even point to a reasonable working solution)

Does this answer your question? [Is it possible to use dotenv in a react project?](https://stackoverflow.com/questions/42182577/is-it-possible-to-use-dotenv-in-a-react-project) — user3133, Feb 07 '22 at 14:10
@user3133 does this mean that the best solution is removing dotenv from node_modules, will it work that way? — SMTP King, Feb 07 '22 at 14:13
.env files should work out of the box with react-scripts, so yes. If you still want to use react with your own implementation of dotenv (I do not recommend it) you need to do your own polyfills and what not, since react works on browser and doesn't really have access to FS module. — user3133, Feb 07 '22 at 14:18
Try to avoid `dotenv` thus `process.env.variable` in your react app. Use config folders to hold your variable because they are not secret anyway after your build. — Nafiu Lawal, May 26 '22 at 23:40

score 10 · Answer 1 · answered Feb 07 '22 at 15:09

Thanks to @user3133, i was able to understand the real issue. It seems dotenv should only be used in backend application like nodejs and not frontend apps like react.

When the error came up, it didn't point to where the error originated from, so I was basically "lost in the blizzard". I was able to figure out that the error came from referencing dotenv in the src directory which is the domain of react which overseas all of your react code.

So basically I was able to fix the issue by removing all lines of code that referenced dotenv in the src dir eg:

require('dotenv').config();

Note that it is okay to put it anywhere else outside the src directory.

Fun fact: react has it's own dotenv, which you can access by just putting REACT_APP_ in front of your env variable.

Read more here: Is it possible to use dotenv in a react project?

Make it a point to avoid `dotenv` thus `process.env.variable` in your react app. Use config folders to hold your variable because they are not secret anyway after your build. — Nafiu Lawal, May 26 '22 at 23:39

Dotenv issues/error with create-react-app react-scripts

1 Answers1