I have an xml response in a local .xml file which i need to convert to JSON in React

I am building a simple react app using create-react-app where i need to read data from this xml and display in UI. I have tried almost all the XML converting packages like xml2js, xmltojson stream, xml-js,,xml2json but failed. xml2js i have tried and converts small xml to json but when i try my xml it fails with error:

Error: Unquoted attribute value
Line: 0
Column: 40401
Char: &
    at error (sax.js:651)
    at strictFail (sax.js:677)
    at SAXParser.write (sax.js:1367)
    at Parser.exports.Parser.Parser.parseString (parser.js:323)
    at Parser.parseString (parser.js:5)
    at Object.<anonymous> (Sal.js:22)
    at __webpack_require__ (bootstrap ac9a14d02bd3405bc94c:555)
    at fn (bootstrap ac9a14d02bd3405bc94c:86)
    at Object.<anonymous> (App.js:6)
    at __webpack_require__ (bootstrap ac9a14d02bd3405bc94c:555)

My XML is 2784 lines long and is structured as below:

    <response>
    <header>
    ..
    .
    .
    .
    </header>
    <branches>
    ..
    ..
    </branches>
    <Products>
    <product1>
    ..
    ..
    </product1>
    <product2>
    ...
    </product2>
    ...
    ...
    ...
    </Products>
    </response>

I am okay to read the xml as local file or a local variable but somehow i need access to all Products field details to display on UI.

My code
var convert = require('xml-js');
import fs from 'fs'

var xml2 = fs.readFileSync('./xmlText.xml', 'utf8');
var options = {ignoreComment: true, alwaysChildren: true};
var result = convert.xml2js(xml2, options); // or convert.xml2json(xml, options)
console.log(result);

Uncaught TypeError: _fs2.default.readFileSync is not a function
    at Object.<anonymous> (converter.js:25)
    at __webpack_require__ (bootstrap efc8124703a44966d7ce:555)
    at fn (bootstrap efc8124703a44966d7ce:86)
    at Object.<anonymous> (App.js:6)
    at __webpack_require__ (bootstrap efc8124703a44966d7ce:555)
    at fn (bootstrap efc8124703a44966d7ce:86)
    at Object.<anonymous> (index.js:3)
    at __webpack_require__ (bootstrap efc8124703a44966d7ce:555)
    at fn (bootstrap efc8124703a44966d7ce:86)
    at Object.<anonymous> (bootstrap efc8124703a44966d7ce:578)


if i declare xml as a variable i get below error:
sax.js:651 Uncaught Error: Invalid character in entity name
Line: 0
Column: 54128
Char:  
    at error (sax.js:651)
    at strictFail (sax.js:677)
    at SAXParser.write (sax.js:1491)
    at Object.module.exports [as xml2js] (xml2js.js:346)
    at Object.<anonymous> (converter.js:27)
    at __webpack_require__ (bootstrap 3a3dffa4ca814efe6ba5:555)
    at fn (bootstrap 3a3dffa4ca814efe6ba5:86)
    at Object.<anonymous> (App.js:6)
    at __webpack_require__ (bootstrap 3a3dffa4ca814efe6ba5:555)
    at fn (bootstrap 3a3dffa4ca814efe6ba5:86)

I have acheived this when i have replaced the ' and & symbols in my xml.

var convert = require('xml-js');


var xml = '<myxml></myxml>'
var options = {ignoreComment: true, alwaysChildren: true};
var result = convert.xml2js(xml2, options); // or convert.xml2json(xml, options)
console.log(result);