Uncaught SyntaxError: Identifier 'socket' has already been declared in client file - reactjs

Question

I've created a React app where I'm using socket.io to connect to the Google Cloud Platform. When I run the client and the server I get following error in the client file:
Uncaught SyntaxError: Identifier 'socket' has already been declared
But I'm not quite sure why since the socket is a constant that is not defined as a global constant. Probably that's not the reason why is failing.
The following is the code of the client.js and the structure of the project:
//connection to socket
const io = require('socket.io-client');
const socket = io.connect('http://localhost:1337');
// ================= visibilitychange =================
// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
// Handle page visibility change
document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
//================= CONFIG =================
// Stream Audio
let bufferSize = 2048,
AudioContext,
context,
processor,
input,
globalStream;
//vars
let audioElement = document.querySelector('audio'),
finalWord = false,
resultText = document.getElementById('ResultText'),
removeLastWord = true,
streamStreaming = false;
//audioStream constraints
const constraints = {
audio: true,
video: false
};
//================= RECORDING =================
function initRecording() {
socket.emit('startGoogleCloudStream', ''); //init socket Google Speech Connection
streamStreaming = true;
AudioContext = window.AudioContext || window.webkitAudioContext;
context = new AudioContext();
processor = context.createScriptProcessor(bufferSize, 1, 1);
processor.connect(context.destination);
context.resume();
var handleSuccess = function (stream) {
globalStream = stream;
input = context.createMediaStreamSource(stream);
input.connect(processor);
processor.onaudioprocess = function (e) {
microphoneProcess(e);
};
};
navigator.mediaDevices.getUserMedia(constraints)
.then(handleSuccess);
}
function microphoneProcess(e) {
var left = e.inputBuffer.getChannelData(0);
var left16 = convertFloat32ToInt16(left);
socket.emit('binaryData', left16);
}
//================= INTERFACE =================
var startButton = document.getElementById("startRecButton");
if(startButton) {
startButton.addEventListener("click", startRecording);
}
var endButton = document.getElementById("stopRecButton");
if(endButton){
endButton.addEventListener("click", stopRecording)
endButton.disabled = true;
}
function startRecording() {
startButton.disabled = true;
endButton.disabled = false;
initRecording();
}
function stopRecording() {
// waited for FinalWord
startButton.disabled = true;
endButton.disabled = true;
streamStreaming = false;
socket.emit('endGoogleCloudStream', '');
let track = globalStream.getTracks()[0];
track.stop();
input.disconnect(processor);
processor.disconnect(context.destination);
context.close().then(function () {
input = null;
processor = null;
context = null;
AudioContext = null;
startButton.disabled = false;
});
}
//================= SOCKET IO =================
socket.on('connect', function (data) {
console.log('client connected');
socket.emit('join', 'Server Connected to Client');
});
socket.on('endmessages', function (data) {
console.log(data);
resultText.appendChild(document.createTextNode(data));
});
socket.on('speechData', function (data) {
// console.log(data.results[0].alternatives[0].transcript);
// console.log(data.results[0]);
var dataFinal = undefined || data.results[0].isFinal;
if (dataFinal === false) {
// console.log(resultText.lastElementChild);
if (removeLastWord) { resultText.lastElementChild.remove(); }
removeLastWord = true;
//add empty span
let empty = document.createElement('span');
resultText.appendChild(empty);
let edit = data.results[0].alternatives[0].transcript;
resultText.lastElementChild.appendChild(document.createTextNode(edit));
resultText.lastElementChild.appendChild(document.createTextNode('\u00A0'));
} else if (dataFinal === true) {
resultText.lastElementChild.remove();
//add empty span
let empty = document.createElement('span');
var br = document.createElement("br");
resultText.appendChild(empty);
let edit = data.results[0].alternatives[0].transcript;
resultText.lastElementChild.appendChild(document.createTextNode(edit));
resultText.lastElementChild.appendChild(document.createTextNode('\u00A0'));
resultText.appendChild(br);
console.log("Google Speech sent 'final' Sentence.");
finalWord = true;
removeLastWord = false;
}
});
socket.on('end', function (data) {
console.log(data);
});
function handleVisibilityChange() {
if (document[hidden]) {
console.log('handleVisibilityChange:hidden');
if (streamStreaming) {
console.log("end");
socket.emit('leave', 'onbeforeunload stop');
stopRecording();
}
} else {
console.log('handleVisibilityChange:show');
startButton.disabled = false;
endButton.disabled = true;
}
}
//================= SANTAS HELPERS =================
// sampleRateHertz 16000 //saved sound is awefull
function convertFloat32ToInt16(buffer) {
let l = buffer.length;
let buf = new Int16Array(l / 3);
while (l--) {
if (l % 3 == 0) {
buf[l / 3] = buffer[l] * 0xFFFF;
}
}
return buf.buffer
}
This is the architecture of the project:
publicFolder
assetsFolder
cssFolder
fontsFolder
jsFolder
client.1.js
client.js
socket.io.js
socket.io.js.map
index.html
serverFolder
app.js //this is server
src
components
App.js //the wrapper component
ComponentA.js
ComponentB.js
App.css
index.js
resgisterServiceWorker.js
.babelrc
webpack.config.js

Answer 1

I think I've fixed, just by changing the connection to the socket from this:
//connection to socket
const io = require('socket.io-client');
const socket = io.connect('http://localhost:1337');
to this
//connection to socket
const socket = io('http://localhost:1337');