diegohaz / diegohaz/arc

`process.env` Object in config.js empty on Browser

Open
#385 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.9k
Forks
289
PR merge metrics
No merged PRs in 30d

Description

From the code below(`config.js`), it seems like it intends to export environment variables, in order it to be made available on client side.

```
const merge = require('lodash/merge')

const config = {
all: {
env: process.env.NODE_ENV || 'development',
isDev: process.env.NODE_ENV !== 'production',
basename: process.env.PUBLIC_PATH,
isBrowser: typeof window !== 'undefined',
},
test: {},
development: {},
production: {},
}

module.exports = merge(config.all, config[config.all.env])

```
However, on browser, `process.env` object is empty, which means `config.all.env` will always assign fallback constant(`'development'`).
So, I am not sure why do we need such configuration setting. (if I went wrong, pls point me out)

```
//logged `process` object
{
"title": "browser",
"browser": true,
"env": {},
"argv": [],
"version": "",
"versions": {}
}
```

Furthermore, it seems like we were able to refer `proccess` object on browser, as we have stated out `process` related constants on `DefinedPlugin` on `webpack.config.js` as below; [Node process object made available to browser client code](https://stackoverflow.com/questions/46062243/node-process-object-made-available-to-browser-client-code).

But, with Webpack 5, `process` object is no longer referable on browser. So any code trying to refer to `process` object on browser leads to `uncaughtReference. process is not defined` error.

```
new webpack.DefinePlugin({
NODE_ENV: process.env.NODE_ENV,
PUBLIC_PATH: publicPath.replace(/\/$/, ''),
}),
```

Is there something that I missed out from the code? or else we could fetch this thing out! :)

Contributor guide

No contributing guide indexed for this repository

Research direction

Inspect config.js and webpack.config.js, especially the DefinePlugin entries and the browser-facing process.env usage. Reproduce the Webpack 5 browser error and determine whether the configuration remains needed; done means the browser build handles the environment values without an uncaught process reference.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, webpack
Domain
build-system, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.