Create-react-app: "react-scripts-ts build" does not copy environment variables

[zilions]

I am setting some environment variables in my build script, like so:

"start": "REACT_APP_APPENV=local npm-run-all -p watch-css react-scripts-ts start",
"build": "REACT_APP_APPENV=production npm run build-css && react-scripts-ts build"

My start script works perfectly and I am able to access REACT_APP_APPENV via process.env. REACT_APP_APPENV.

Although my build script does not copy over REACT_APP_APPENV, and process.env. REACT_APP_APPENV is undefined.

I tried creating a fresh new project via npx create-react-app new-app --typescript and the same issue occurred.

[mrmckeb]

HI @zilions, we don't maintain react-scripts-ts, that's a different project.

If you're seeing this with our repo (using react-scripts) can you please provide more information?

[zilions]

@mrmckeb - I migrated my project to create-react-app and the issue is still present.

react-scripts build fails to copy environment variables that are prepended with REACT_APP_.

Same info as my original post - I can access all environment variables prepended with REACT_APP_ when using react-scripts start, although they are all undefined after serving a build created with react-scripts build.

[mrmckeb]

Hi @zilions, can you please complete the issue template and provide a repository with reproduction steps? This should be working, so we need to see what's happening in this case.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[fabrizioromanelli]

Same problem here!
My package.json has the following line:

"build-local": "REACT_APP_LOCAL=false react-scripts build"

and my js snippet is something like this:

if (process.env.REACT_APP_LOCAL == 'true') {
  const sampleVal = 0;
} else {
  const sampleVal = 1;
}

and when I run yarn build-local it does not copy the REACT_APP_ variables into the environment and it is impossible to get them from within the .js files.

[fabrizioromanelli]

I think I found the issue (that is not an issue, actually). In order to use REACT_APP_ variables it's mandatory to include dotenv into your project and then use them in the scripts.

Do the following:
yarn add node-env
Then add the following line at the beginning of your script:
require('dotenv').config()
Just use your own REACT_APP_ variable.

Sorry for the quick reply previous...

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[nartoland]

Ok

[jankalfus]

I too am observing this problem. I've set up typescript according to the guide

Here's my build script from package.json:

"scripts": {
    "build": "cross-env REACT_APP_VERSION=\"$CI_COMMIT_REF_NAME (`echo $CI_COMMIT_SHA | cut -c 1-8`)\" react-scripts build",

$ CI_COMMIT_REF_NAME=testovaci_ref
$ CI_COMMIT_SHA=testovaci_sha
$ npm run build



md5-995869e4319307418fd59c0f2576fc4a



$ CI_COMMIT_REF_NAME=testovaci_ref
$ CI_COMMIT_SHA=testovaci_sha
$ REACT_APP_VERSION="$CI_COMMIT_REF_NAME (`echo $CI_COMMIT_SHA | cut -c 1-8`)" node ./node_modules/react-scripts/bin/react-scripts.js build

I'm getting the expected output: "testovaci_ref (testovac)"

But this still doesn't work when put into package.json.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[jankalfus]

Don't close

[mrmckeb]

OK, so it looks like there is a bug when you're not using dotenv.

Would anyone be interested in raising a PR for this?