'Process is not define' without react-scripts

[GuillermoPena]

I have tried with react-script versions 4 and 5, and without react-script and issue persist... 'Process is not define' oly importing library... (?!?!)

My package.json:

{ "name": "avatar", "version": "0.1.0", "private": true, "dependencies": { "@emotion/styled": "11.10.5", "@iconify/react": "4.0.0", "@mui/icons-material": "^5.11.11", "@mui/material": "5.10.11", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.3.4", "color": "^4.2.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-secure-storage": "^1.1.0", "talkr": "^3.4.0", "web-vitals": "^2.1.4", "wouter": "^2.10.0", "zustand": "^4.3.5" },

"scripts": { "start": "webpack serve --mode=development --config webpack.config.js", "build": "webpack --mode=production --config webpack.config.js" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "css-loader": "^5.2.0", "esbuild-loader": "^3.0.1", "sass": "^1.60.0", "sass-loader": "^11.0.1", "style-loader": "^2.0.0", "url-loader": "^4.1.1", "webpack": "^5.28.0", "webpack-cli": "^4.9.1", "webpack-dev-server": "^4.7.1" } }

[sushinpv]

Hi @GuillermoPena The problem is you are starting the React Application using webpack and not with react-script,

The react-script is configured in a way that, it will check for the .env file and load all the properties to process.env,

But, by default, webpack will not do this

There are two ways to solve this issue,

1. You can change your start and build script to react-scripts start and react-scripts build. You can find the implementation here https://github.com/sushinpv/react-secure-storage/blob/master/package.json

2. The second approach is to add a webpack configuration to create process.env

To do that, You need to create the webpack configuration file as webpack.config.js and specify the process configuration

You can follow the second implementation specified on the SO link https://stackoverflow.com/questions/41359504/webpack-bundle-js-uncaught-referenceerror-process-is-not-defined

Example:

1. Install dotenv:

yarn add -D dotenv or npm i -D dotenv

2. Add .env file in your project root with the required variables:

NODE_ENV=development
apiKey=w23io222929kdjfk
domain=example.domain.org

3. Define these variables with webpack.DefinePlugin:

// webpack.config.js const webpack = require('webpack') const dotenv = require('dotenv')

// this will update the process.env with environment variables in .env file dotenv.config();

module.exports = { //... plugins: [ // ... new webpack.DefinePlugin({ 'process.env': JSON.stringify(process.env) }) // ... ] //... }

[sushinpv]

New version is release with the check for process.env defined for not