Electron main.js NODE_ENV is not available

Question

So I am creating an application with:

React 16.4.0
Electron 2.0.2
Webpack 4.11.0

I am now able to compile and run the app with webpack (webpack dev server). The problem is that I only want to show the Chrome dev tools in development mode. This is something I can manage from the main.js file of Electron. But the problem is that I do not want to do it manually.

So logically I want to do this via the process.env.NODE_ENV variable. This variable is set by Webpack in the webpack-config. The problem is that when I try to access the variable in the main.js file I get an undefined instead of 'development' or 'production'.

Webpack.common.js

const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  resolve: {
    modules: [path.resolve(__dirname), 'node_modules']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          presets: ['env', 'react'],
          plugins: ['transform-runtime'],
          env: {
            production: {
              presets: ['react-optimize']
            }
          }
        }
      }
    ]
  }
};

Webpack.dev.js

const webpack = require("webpack");
const merge = require("webpack-merge");
const common = require("./webpack.common");
const path = require("path");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = merge(common, {
  mode: "development",
  entry: ["react-hot-loader/patch", path.join(__dirname, "src", "index.js")],
  devtool: "eval-source-map",
  plugins: [
    new BundleAnalyzerPlugin({ //Make bundle sizes visible
      analyzerMode: "static",
      openAnalyzer: false
    }),
    new webpack.HotModuleReplacementPlugin() // Enable hot module replacement
  ]
});

Since Webpack V4 the NODE_ENV must be set via the mode parameter.

Main.js

Below is an abstract version of the file:

const isDevelopement = (process.env.NODE_ENV === "development");

console.log("Result: ", process.env.NODE_ENV); // Results in Undefined

function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false, // For security reasons
      devTools: isDevelopement
    }
  });
}

So I was wrong. Webpack mode sets the iternal NODE_ENV only for compile time. It does NOT update the global NODE_ENV. So you must still use the webpack.definePlugin:

new webpack.DefinePlugin({ //Set the node env so that the project knows what to enable or disable
    'process.env': {
      'NODE_ENV': JSON.stringify('development')
    }
})

Now I can access the NODE_ENV variable in my application. But I can still not access this variable in the main.js file of Electron.

Why does this result in undefined and what should I change?

klimat · Accepted Answer · 2018-06-06T10:44:15.613

1

Try to read mode through process.env.WEBPACK_MODE.

In your case:

const isDevelopement = (process.env.WEBPACK_MODE === "development");

Another, workaround solution using WebpackDefinePlugin:

const mode = process.env.NODE_END || 'development';

module.exports = merge(common, {
  mode: mode,
  plugins: [
    new webpack.DefinePlugin({
      'WEBPACK_MODE': JSON.stringify(mode),
    })
  ]
});

and then you should be able to access it through process.env.WEBPACK_MODE.

edited Jun 06 '18 at 10:44

answered Jun 06 '18 at 10:10

klimat

24,711
7
63
70

using `WEBPACK_MODE` still results in undefined. If I log the `env` variabel I also cannot see the `WEBPACK_MODE` variable in the list of keys. – Mr.wiseguy Jun 06 '18 at 10:16
Try to pass `mode` as a parameter to webpack: `webpack ---mode development` – klimat Jun 06 '18 at 10:19
I just found out I still needed to use the definePlugin, what a coincidence. But I still cannot access this variable in Electron. This still results in undefined :( – Mr.wiseguy Jun 06 '18 at 10:32
TBH, I haven't worked with Electron development environment. Try standard and most simple like `SET NODE_ENV=development && webpack ...` or EXPORT if you're unix based. Then read `process.env.NODE_ENV`. – klimat Jun 06 '18 at 10:39
That works, Thanks! But now the question remains, why isn't the NODE_ENV leaked into the scope of electron, where it is available in the scope of the app (Electron is nothing more then a container arround an App, just like Cordova) – Mr.wiseguy Jun 06 '18 at 10:41
If it works, you can pass it to `mode` and use `WebpackDefinePlugin` to make it available across whole app :) – klimat Jun 06 '18 at 10:42
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/172587/discussion-between-mr-wiseguy-and-mklimek). – Mr.wiseguy Jun 06 '18 at 10:43

score 0 · Answer 2 · answered Jun 06 '18 at 10:43

Sorry, but process.env.NODE_ENV is an environment variable. This should not be set by some application in my opinion.

However, if you want to set it up for your application why don't you just add it to your package.json file ("scripts" section), like:

"start_vdev": "NODE_ENV=development electron index.js",
"start_vprod": "NODE_ENV=production electron index.js"

Information on how to set up NODE_ENV in your OS can be found here: process.env.NODE_ENV is undefined

score 0 · Answer 3 · answered Feb 13 '19 at 01:43

0

I'm not using Webpack for my particular build of Electron, but I did encounter the same problems. I ended up with a solution that used Electron's ipcMain and ipcRenderer modules to get around it.

answered Feb 13 '19 at 01:43

factorone33

41
5

Electron main.js NODE_ENV is not available

3 Answers3