global is not defined while using socket.io-client with webpack

Question

I am getting following error when i have added socket.io-client plugin in my React web app.

Uncaught ReferenceError: global is not defined at Object../node_modules/socket.io-parser/is-buffer.js (is-buffer.js:4) at webpack_require (bootstrap:22) at Object../node_modules/socket.io-parser/binary.js (binary.js:8) at webpack_require (bootstrap:22) at Object../node_modules/socket.io-parser/index.js (index.js:8) at webpack_require (bootstrap:22) at Object../node_modules/socket.io-client/lib/index.js (index.js:7) at webpack_require (bootstrap:22) at Object../src/client/components/gettingStarted/socketest.js (socketest.js:1) at webpack_require (bootstrap:22)

The following is my webpack config file.

/*eslint-disable*/
var Path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var FileChanger = require('webpack-file-changer');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var Webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var fs = require('fs');

var isProduction = process.env.NODE_ENV === 'production';
var cssOutputPath = isProduction ? 'styles/app.css' : 'styles/app.css';
var jsOutputPath = isProduction ? 'scripts/app.[hash].js' : 'scripts/app.js';
var ExtractSASS = new ExtractTextPlugin(cssOutputPath);
var port = isProduction ? process.env.PORT || 8080 : process.env.PORT || 3000;

// ------------------------------------------
// Base
// ------------------------------------------

var webpackConfig = {
  mode: isProduction ? 'production' : 'development',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new Webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(isProduction || process.env.atlas ? 'production' : 'development'),
      },
    }),

  ],
  module: {
    rules: [{
      test: /.jsx?$/,
      include: Path.join(__dirname, './src/client'),
      loader: 'babel-loader',
      query: {
        presets: ['react', 'es2015', 'stage-0'],
        plugins: ['transform-decorators-legacy'],
      },
    }, {
      test: /\.css$/,
      loader: 'style-loader!css-loader',
      include: [/carbon-components/, /flexboxgrid/],
    }],
  },
  target: 'node',
  node: {
    console: false,
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
  },
  // externals: nodeModules,
};

isProduction ?
  webpackConfig.plugins.push(
    new  FileChanger({
      move:  [{
        //from: path.resolve(rootFolder, './assets', 'index.html'),
        from: Path.join(__dirname, './src/server/views/app.dust'),
        to:  'dist/views/app.dust'
      }, {
        from: Path.join(__dirname, './src/server/views/partials/app_content.dust'),
        to: 'dist/views/partials/app_content.dust'
      }],
      change:  [
        {
          file:  'dist/views/app.dust',
          parameters:  {
            'proxy-context-root':  '/mobile/applaunch',
            '/mobile/applaunch/scripts/app.js':  '/mobile/applaunch/scripts/app.[hash].js'
          }
        }
      ]
    })
  )
  : webpackConfig.plugins.push(
    new  FileChanger({
      move:  [{
        //from: path.resolve(rootFolder, './assets', 'index.html'),
        from: Path.join(__dirname, './src/server/views/app.dust'),
        to:  'dist/views/app.dust'
      }, {
        from: Path.join(__dirname, './src/server/views/partials/app_content.dust'),
        to: 'dist/views/partials/app_content.dust'
      }],
      change:  [
        {
          file:  'dist/views/app.dust',
          parameters:  {
            'proxy-context-root':  '',
            '<link rel="stylesheet" href="/api/v6/css/common.css" />': '',
            '<link rel="stylesheet" href="/api/v6/css/header.css" />': '',
            '<script src="/api/v6/js/common-header.js"></script>': ''
          }
        },
      ]
    })
  );


var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function (x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function (mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });


// ------------------------------------------
// Entry points
// ------------------------------------------
webpackConfig.entry =  [require.resolve('./polyfills'),
Path.join(__dirname, './src/client/index')];


// ------------------------------------------
// Bundle output
// ------------------------------------------
webpackConfig.output = {
  path: Path.join(__dirname, './dist'),
  filename: jsOutputPath,
};

// ------------------------------------------
// Devtool
// ------------------------------------------
webpackConfig.devtool = isProduction ? 'source-map' : 'cheap-module-source-map';

// ------------------------------------------
// Module
// ------------------------------------------
webpackConfig.module.rules.push({
  test: /\.scss$/,
  // loaders: ['style-loader', 'css-loader', 'sass-loader'],
  use: [
    {
      loader: 'style-loader',
      options: {
        exclude: /flexboxgrid/,
      },
    },
    {
      loader: 'css-loader',
      options: {
        importLoaders: 2,
        exclude: /flexboxgrid/,
      },
    },
    {
      loader: 'postcss-loader',
      options: {
        plugins: () => [
          require('autoprefixer')({
            browsers: ['last 1 version', 'ie >= 11'],
          }),
        ],
      },
    },
    {
      loader: 'sass-loader',
      options: {
        includePaths: [Path.resolve(__dirname, '..', 'node_modules')],
      },
    },
  ],
});

isProduction
  ? webpackConfig.module.rules.push({
    test: /\.js$/,
    include: Path.join(__dirname, './src/client'),
    loader: 'string-replace-loader',
    query: {
      search: '/base-api-we-use/',
      replace: '/mobile/applaunch/api/',
      flags: 'g'
    }
  })
  : webpackConfig.module.rules.push({
    test: /\.js$/,
    include: Path.join(__dirname, './src/client'),
    loader: 'string-replace-loader',
    query: {
      search: '/base-api-we-use/',
      replace: '/api/',
      flags: 'g'
    }
  });

// ------------------------------------------
// Plugins
// ------------------------------------------
isProduction
  ? webpackConfig.plugins.push(
    new Webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    }),
    ExtractSASS
  )
  : null;


module.exports = webpackConfig;

Answer 1

You have to add in polyfills.ts

(window as any).global = window

Reference Link