Open rgb2hsl opened 2 years ago
With CRA 5, webpack was upgraded to v5, where node built-ins (such as process
) have been removed.
You either need to eject your app which isn't desirable or use something like craco to configure webpack with an unejected create-react-app.
There is an open pull request that should address this issue.
we also found that CRA5 is almost unusable without ejecting at the moment.
we ejected, installed process
and added this line to the webpack config:
resolve: {
// ...
alias: {
// ...
process: 'process/browser',
},
We're also considering an ejection, unless https://github.com/facebook/create-react-app/pull/11764 will be merged. But at the moment it has conflicts.
UPD: we've ejected :D
Same problem, backing down to 4.0.3 for now. I just started working with CRA and a bug this basic is a bit unsettling. Are there no tests that run against a test webpack bundle to check for things like this?
I had the same issue and I updated the .eslintrc with env with the below code and I was able to access the node api and windows apis link localstorage and process
You don't have to eject or add CRACO. Also not that craco still did not extent support to CRA 5
Tested that I was able to access the variables
env: {
browser: true,
node: true,
},
Saw this issue and it concerned me so I did some digging. Keep in mind that I am not well versed in wepback at all so there very well could be something I am missing.
In the example repo @ru-web-designer as soon as I removed console.log(process)
the project loaded. This seemed weird to me so I looked into the webpack config and it looks like env variables are loaded using this in. https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/env.js
function getClientEnvironment(publicUrl) {
const raw = Object.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
NODE_ENV: process.env.NODE_ENV || 'development',
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
PUBLIC_URL: publicUrl,
// We support configuring the sockjs pathname during development.
// These settings let a developer run multiple simultaneous projects.
// They are used as the connection `hostname`, `pathname` and `port`
// in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
// and `sockPort` options in webpack-dev-server.
WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
// Whether or not react-refresh is enabled.
// It is defined here so it is available in the webpackHotDevClient.
FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
}
);
// Stringify all values so we can feed into webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};
return { raw, stringified };
}
So it looks to me that they use the DefinePlugin
to load env variables rather than relying on the node-builtins. This seems to explain why process
is undefined but specifically process.env
is. Hope this helps.
Describe the bug
I created totally fresh CRA5 project (TypeScript), except .env added in the project root and src/App.tsx is modified with attempt to access
process.env
variables. I got crash with unhandled exceptionprocess is undefined
. I think it's somehow related to Webpack 5 upgrade.Did you try recovering your dependencies?
No, because project is fresh create-react-app v5 bootstrap.
Which terms did you search for in User Guide?
https://create-react-app.dev/docs/adding-custom-environment-variables/ said everything is supposed to work fine.
Environment
Steps to reproduce
npx create-react-app my-app --template typescript
REACT_APP_FOO=foo
process.env.REACT_APP_FOO
(or justprocess
itself) somehow. I, for ex, addedconsole.log("process is ", process);
and{process.env.REACT_APP_FOO}
ini JSX.Expected behavior
I got the
![image](https://user-images.githubusercontent.com/3310192/149836161-1e66c930-35d6-4152-be09-7ca4b9698cd8.png)
REACT_APP_FOO
value from.env
file, just like in CRA Docs:Actual behavior
I got Unhandled Exception, process is undefined:![image](https://user-images.githubusercontent.com/3310192/149833636-3b650b8c-e6be-403c-bef6-23792b03e575.png)
Reproducible demo
https://github.com/ru-web-designer/cra5-process-env-issue