reactjs - Cross-env not changing env variable when running yarn

Question

I am trying to setup the environment so that when i choose to run prod it runs the prod settings and when i choose to run dev it runs the dev server, currently my package.json scrips look like this :

  "scripts": {
    "build:dev": "cross-env NODE_ENV=developement webpack",
    "build:prod": "cross-env NODE_ENV=production webpack",
    "start:dev": "cross-env NODE_ENV=developement webpack-dev-server ",
    "start:prod": "cross-env NODE_ENV=production webpack-dev-server "
  },

webpack config file:

const webpack = require("webpack");
const path = require("path");
const dotenv = require("dotenv");

module.exports = {
  //Entry file for webpack.config
  entry: "./src/index.js",
  //Target specific use of project ie. nodejs project we use node value
  target: process.env.NODE_ENV === "dev" ? "node" : "web",
  //Dev server meant for hosting local server for developement
  devServer: {
    contentBase: path.resolve(__dirname, "public"),
    historyApiFallback: true,
    port: 8080,
  },
  //Modules are used to set rules to build specific file types
  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/env", "@babel/react"],
              plugins: [
                "@babel/plugin-transform-runtime",
                "@babel/plugin-proposal-class-properties",
              ],
            },
          },
        ],
      },
      {
        test: /.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
        },
      },
      {
        test: /.(css|sass|scss)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: 2,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /.svg$/,
        use: [
          {
            loader: "svg-inline-loader",
            options: {
              limit: 10000,
            },
          },
        ],
      },
      {
        test: /.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  externals: {
    // require("jquery") is external and available
    //  on the global var jQuery
    "jquery": "jQuery"
  },
  //Changes how modues are resolved
  resolve: {
    extensions: ["*", ".js", ".jsx", ".ts", ".tsx"],
  },
  //Output is setup to serve the bundle.js file to be served to web browser
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "bundle.js",
    publicPath: "/",
  },
  //Prevent bundling of certain packages
  externals: {
    "react-native": true,
  },
  //A javascript object used to do various extra things for webpack
  plugins: [
    new webpack.DefinePlugin({
      "process.env": JSON.stringify(dotenv.config().parsed),
    }),
  ],
};

and i do:

console.log(process.env.NODE_ENV)

inside my homepage jsx, but everytime I run it even when i do yarn start:prod it console.logs development and not production, why is cross-env not successfully changing the NODE_ENV to production when i run this?

question from:https://stackoverflow.com/questions/65844864/cross-env-not-changing-env-variable-when-running-yarn

Answer 1

In order to copy env variable into webpack, you have to use webpack. DefinePlugin as you have done in your configuration file which looks like you're trying to copy all things into webpack.

Anyway if you want to use the value from cross-env, you would have do the same thing by using DefinePlugin plugin but input the specific value NODE_ENV as following:

webpack.config.js

{
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
  ],
}