CODEWITHSUNDEEP
reactjswebpackcreate-react-appdotenvreact-scripts
SMTP King
SMTP King

Reputation: 528

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

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)

Upvotes: 9

Views: 12814

Answers (2)

Tsogang Mosweswe
Tsogang Mosweswe

Reputation: 41

React has its own built in environmental variable system. check this link for more.

Upvotes: 0

SMTP King
SMTP King

Reputation: 528

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?

Upvotes: 14

Related Questions