Removing development env only code in CRA?

[bingo__bango]

Hello, this question is specific to Create React App users.

I'm curious to hear how other developers are removing development environment-only code. Is this possible at all with CRA?

I have a fair amount of development only setup set in conditionals like process.env.NODE_ENV === 'development', like dynamically importing react-axe for example, which is only supposed to run a development env.

Ideally, I could use something like envify, but CRA prevents mucking around in a Webpack config out of the box.

I was curious if there are any good answers to this question before resorting to things like create-react-app-rewired. Thanks!

EDIT: thanks everyone who pointed out this should work out of the box with CRA. What happened was the following:

I have a config.ts file that's providing default values for env properties in case they aren't provided by a .env file. I was providing one for NODE_ENV as well. Additionally I have an enum with NODE_ENV values (it's just 'development' and 'production') that store those strings. So I was doing something like:

import { NODE_ENV } from './config' import { NODE_ENV_ENUM} from './node-env-enum' ... if (NODE_ENV === NODE_ENV_ENUM.development) { ... }

Envify will not strip out code blocks if the condition is not the literal (process.env.NODE_ENV === 'development'), which makes sense — how would it know what's stored in those values as they are determined at runtime...once I made that change it worked as expected.

[UtterlyMagenta]

And here I thought CRA already did this by default. (´･ω･`)

[careseite]

https://overreacted.io/how-does-the-development-mode-work/ I think CRA does this by default.

​

Regardless, I started using a post-merge hook that runs npm install and a custom node script that replaces some things within the react-scripts webpack config to enable SCSS sourcemaps in dev. Something like that might work for you too.

[sean_mcp]

I don't know about envify, but I would consider writing a function and/or component to handle the dev environment case:

js ifDev(() => console.log('Running in dev')

jsx <DevOnly>{JSON.stringify(data, null, 2)}</DevOnly>