2

I'm using React Boilerplate and had a .env separately at the root to denote whether my server was development, staging or production. However, I realized that for my setup, that was not the best route. Then I learned that in package.json there is a block of code that actually shows environment variables for production, shown below:

"babel": {
    "env": {
        "production": {
            "only": [
                "app"
            ],
            "plugins": [
                "transform-react-remove-prop-types",
                "transform-react-constant-elements",
                "transform-react-inline-elements"
            ]
        },
        "test": {
            "plugins": [
                "transform-es2015-modules-commonjs",
                "dynamic-import-node"
            ]
        }
    }
}

From here, I would like to add development and staging but I keep getting a webpack error that says 

Unknown option: C:\folders\blah\project\package.json.development.VARIABLE.
A common cause of this error is the presence of a configuration options 
object without the corresponding preset name. Example:

Invalid: { presets: [{option: value}] }
Valid: { presets: [['presetName', {option: value}]] }

and my addition is like 

"development": {
    "VARIABLE": "value"
}

Any idea?

Martavis P.
  • 1,708
  • 2
  • 27
  • 45
  • Environment variables for what use? `development` is the value of the `NODE_ENV` env variable in your example, `VARIABLE` is just being passed as an argument to Babel, which is erroring since that argument does not exist. – loganfsmyth Jul 20 '17 at 19:08

1 Answers1

0

This configuration is purely for babel, hence the babel field in the package.json and it's the same as if you used that config in a .babelrc. Babel verifies all options and it doesn't have a VARIABLE option (full list of options).

Babel's env option allows you to use different presets/plugins for different environments (NODE_ENV or BABEL_ENV), because there is no better way to conditionally define options based on the environment in a JSON file. In babel 7 you will be able to use a JavaScript file (.babelrc.js) which gives you the full power of JavaScript to conditionally define and compose any options (including checking for environment variables).

If you want to use environment variables for custom configurations, you'll have to handle them yourself. Whether you use a .env file or specify the environment variables manually is up to you.

Michael Jungo
  • 31,583
  • 3
  • 91
  • 84
  • Ah, I see. Thanks. So I've been using a `.env` file but for deployment, I'm trying to have Jenkins run `npm run build` for dev, staging and production. The problem is when I want to do anything other than dev. I don't know where to put the other `.env` files. – Martavis P. Jul 20 '17 at 19:34
  • Where exactly do you want to use the environment variables? Is it for an API key or to decide what configuration to use to build (either run time or compile time)? – Michael Jungo Jul 20 '17 at 19:59
  • Things like API keys – Martavis P. Jul 20 '17 at 21:24