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

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

socket.io-client

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;


1 Answer
1

You have to add in polyfill.ts

(window as any).global = window


Reference Link

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.