Create-react-app: Tree shaking only works with process.env.NODE_ENV?

[NAllred91]

I'm finding that tree shaking only works with process.env.NODE_ENV and won't work with process.env.REACT_APP_[my variable name]

For example, if I do the following myModule is not showing up in my production build.

import {myFunction} from './myModule'

if(process.env.NODE_ENV === 'development') {
    myFunction()
}

But, if I want to use a different environment variable myModule is always included.

import {myFunction} from './myModule'

if(process.env.REACT_APP_ENABLE_MY_FUNCTION === 'true') {
    myFunction()
}

Is it known that tree shaking only works with process.env.NODE_ENV? Is there any way to do tree shaking with a custom environment variable?

[NAllred91]

Now I see that REACT_APP_ environment variables are available at runtime, whereas NODE_ENV is not. So this makes sense that using REACT_APP_ environment variables wouldn't enable tree shaking.

I guess that means my question is, is there a way to add custom environment variables that behave like NODE_ENV, where process.env.NODE_ENV is replaced with a string at build time? It seems the answer is no?

I see here (https://github.com/facebook/create-react-app/issues/8626) someone suggested using a dynamic import, which ultimately works if there is no other solution. However, then I'll need to write a post-build script to delete these bundles if I want to make sure they aren't on my server. And I need to update my logic to handle asynchronously loading the module, which isn't ideal.

[NAllred91]

Here it is....

If you want to do this:

import {myFunction} from './myModule'

if(process.env.REACT_APP_ENABLE_MY_FUNCTION === 'true') {
    myFunction()
}

You must be sure to define REACT_APP_ENABLE_MY_FUNCTION. If you do not define it then the if(process.env.REACT_APP_ENABLE_MY_FUNCTION === 'true') doesn't get turned into if(false) at build time.

But it still evaluates to false at runtime.

So when using this command (REACT_APP_ENABLE_MY_FUNCTION=false npm run build), myModule is not included in the build. But if I just run npm run build without explicitly setting REACT_APP_ENABLE_MY_FUNCTION it is included.

I don't see this documented anywhere, but it probably should be. Although I realize this behavior comes from something create-react-app depends on and not create-react-app itself. The only way I figured this out was by taking the time to go through the generated bundle.