Create-react-app: Environment Variables - Blowing up

[dschinkel]

So it appears I can't add my own environment variables by simply adding require('dotenv').config() to index.js and added an .env file to the root of my create-react-app. Now it blows up creating all sorts of pain...such as it's creating a package.json.lock file now and npm install is totally bombing:

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables

I don't get this, so I must add REACT_APP in front of every environment variable? I simply want to create environment variables for my Amazon S3 and other things. I tried adding those via my own .env file and running dotenv

I'm creating some deployment scripts for travis in a deploy folder, and I need to be using custom environment variables for that for Amazon, ect.

[Timer]

dotenv is a runtime environment variable solution, not build time solution. This means it will not work as dotenv is not compatible with webpack.
If you'd like variables to be inlined at compile time, you must use REACT_APP_.

[Timer]

package.json.lock has nothing to do with CRA and is actually a new feature of npm@^5.
Unfortunately, it is still extremely buggy (and is what is causing your npm install to bomb out). I suggest you downgrade to npm@^3 until npm 5 is more stable.

[dschinkel]

thanks, ok I thought that the .lock was related but wasn't sure.

[Timer]

If you'd like to keep experimenting with npm@^5, remove the .lock file and the node_modules/ folder and re-run your npm install.

---

Sorry that you have to prefix variables with REACT_APP_! This is to reduce confusion as it explicitly lets you know they're going to be inlined at build time and are not a normal runtime environment variable.

Let me know if you have more questions!

[dschinkel]

yea I don't really care about npm 5. I don't have an npm version defined in my package.json so I'll probably need to add that so this doesn't happen again unexpectedly :).

[dschinkel]

If you'd like to keep experimenting with npm@^5, remove the .lock file and the node_modules/ folder and re-run your npm install

yea tried that many times but kept getting that screen shot error, I'm just gonna revert npm and explicitly set the version in package.json

[dschinkel]

hmm I added this but still get a lock file and failed npm install:

"engines": {
"npm": "3.10.x"
},

eh, it's still using npm 5, I checked.. npm -v

[Timer]

@dschinkel you'll need to change your global version, go ahead and run npm install -g npm@3

[Timer]

The engines field is primarily used in PaaS environments like App Engine or Heroku.

[dschinkel]

I ran npm install -g [email protected], deleted node_modules, added npm 3.10.0 to package.json

I'm back to normal, thanks!