I have migrated react-scripts to 5.0.0 for our web client react app. Since then it is failing to load the web client in the browser failing due to an uncaught reference error coming from main.js under node_modules/dotenv/lib as shown below.
function config (options /*: ?DotenvConfigOptions */) /*: DotenvConfigOutput */ {
let dotenvPath = path.resolve(process.cwd(), '.env') ----------> **Failing Here**
let encoding /*: string */ = 'utf8'
let debug = false
if (options) {
if (options.path != null) {
dotenvPath = options.path
}
if (options.encoding != null) {
encoding = options.encoding
}
if (options.debug != null) {
debug = true
}
}
This is the call stack that is apparently showing that the problem is coming from web pack bootstrap...
main.js:78 Uncaught ReferenceError: process is not defined
at Object.config (main.js:78:1)
at Module../src/index.jsx (index.jsx:8:1)
at Module.options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at startup:7:1
at startup:7:1
can you please help me in resolving this?
Webpack and create-react-app / react-scripts are complex, so I'm not sure that I can answer your question, but a couple of possible pointers:
Webpack 5 no longer defaults to including the Node.js polyfills that Webpack 4 provided, so modules like process may no longer be available. For more information:
For your particular project, I noticed that the error is being thrown from the dotenv package. There's no reason to use dotenv in a web application; dotenv is for loading process.env environment variables from a .env file off of the filesystem, but a web application can't access your filesystem. Instead, Create React App takes any REACT_APP_... environment variables from its own environment and exposes them to the web app, or you could set up Webpack to define environment variables, but that would be done from your Webpack configs, rather than by accessing dotenv from the web app itself.