`process.env` Object in config.js empty on Browser
- 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