title: Webpack+SemanticUI+React: process is not defined
body: <p>I have found numerous posts about the Webpack error:</p>
  
  <pre><code>Uncaught ReferenceError: process is not defined
  </code></pre>
  
  <p>most of which suggest adding a plugin to the <code>webpack.config.js</code>:</p>
  
  <pre><code>plugins: [ 
    // ...
    new webpack.DefinePlugin({
        'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
        }
    }),
    // ...
  ]
  </code></pre>
  
  <p>however this does not seem to do the trick in my case. </p>
  
  <p>To make things easy, I have created <a href="https://github.com/sheljohn/minimal-semantic-react" rel="nofollow noreferrer">a repo</a> with the bare minimum to setup <a href="https://react.semantic-ui.com/" rel="nofollow noreferrer">SemanticUI-React</a> with Webpack, which should be straightforward to navigate. My config in <code>webpack.config.js</code> is heavily inspired from this <a href="https://www.valentinog.com/blog/react-webpack-babel/" rel="nofollow noreferrer">recent tutorial</a> which seems to have a lot of positive comments.</p>
  
  <p>To reproduce the error, just clone the repo on your machine (I use <code>yarn</code>, but this should work with <code>npm</code> too):</p>
  
  <pre><code>git clone https://github.com/sheljohn/minimal-semantic-react
  cd minimal-semantic-react/
  yarn install
  yarn run serve
  </code></pre>
  
  <p>which opens at <code>localhost:3000</code>, and the error can be seen in the developer console.</p>
  
  <p>As far as I understand, it seems that when React loads, it is looking to determine whether production or development mode is set, using the variable <code>process.env.NODE_ENV</code>, which is undefined in the browser.</p>
  
  <p>This might be related to the <code>target</code> field in the Webpack config (set to <code>web</code> by default); but since React is loaded from CDN, prior to the bundle, I guess it doesn't know about what WebPack is doing, which makes me perplex as to why adding a plugin in the config would change anything...</p>
  
  <p>Hence my question: <strong>is it possible to use semantic-ui-react by declaring the big libs (React, ReactDOM, semantic) as externals?</strong> Everything works fine if I bundle them, but the bundle ends up around 4MB, which is quite big.</p>
  
  <hr>
  
  <h2>Additional Details</h2>
  
  <p>Error as seen in Chrome (OSX High Sierra, v66.0.3359.181, dev console):</p>
  
  <pre><code>react.development.js:14 Uncaught ReferenceError: process is not defined
      at react.development.js:14
  (anonymous) @ react.development.js:14
  </code></pre>
  
  <p>and code excerpt at line 14:</p>
  
  <pre><code>if (process.env.NODE_ENV !== "production") {
  </code></pre>
  
  <hr>
  
  <p>File <code>webpack.config.js</code></p>
  
  <pre><code>const path = require("path");
  const webpack = require("webpack");
  const publicFolder = path.resolve(__dirname, "public");
  
  module.exports = {
    entry: "./src/index.jsx",
    target: "web",
    output: {
      path: publicFolder,
      filename: "bundle.js"
    },
    devServer: {
      contentBase: publicFolder,
      port: 3000
    },
    externals: {
      'jquery': 'jQuery',
      'lodash': '_',
      'react': 'React',
      'react-dom': 'ReactDOM',
      'semantic-ui-react': 'semantic-ui-react'
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader'
          }
        }
      ]
    },
    plugins: [ 
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
        }
      }),
      new webpack.HotModuleReplacementPlugin()
    ]
  };
  </code></pre>
  
  <hr>
  
  <p>File <code>.babelrc</code></p>
  
  <pre><code>{
    "presets": ["env", "react"]
  }
  </code></pre>