oozcitak/xmlbuilder2

TypeError in production build with React

Closed this issue · 4 comments

Bug Description
I have built a React app using https://create-react-app.dev/ and xmlbuilder2. Everything works fine when I start the app with yarn start in development mode. But when I build the app using yarn build I get this error when triggering an XML conversion:

classCallCheck.js:3 Uncaught (in promise) TypeError: Cannot call a class as a function
    at e.exports (classCallCheck.js:3)
    at new n (NodeImpl.ts:93)
    at n.<anonymous> (createSuper.js:14)
    at new n (DocumentImpl.ts:69)
    at Object.t.create_document (CreateAlgorithm.ts:61)
    at new n (WindowImpl.ts:28)
    at Function.value (WindowImpl.ts:41)
    at Object.t.create_window (CreateAlgorithm.ts:47)
    at e.get (DOMImpl.ts:68)
    at new e (DOMImplementationImpl.ts:27)

To Reproduce
Steps to reproduce the behavior just paste this code into your App.js after creating your app via npx create-react-app my-app

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { create } from 'xmlbuilder2';

const testJson = 
{
  "widget": {
    "debug": "on",
      "window": {
      "title": "Sample Konfabulator Widget",
        "name": "main_window",
          "width": 500,
            "height": 500
    },
    "image": {
      "src": "Images/Sun.png",
        "name": "sun1",
          "hOffset": 250,
            "vOffset": 250,
              "alignment": "center"
    },
    "text": {
      "data": "Click Here",
        "size": 36,
          "style": "bold",
            "name": "text1",
              "hOffset": 250,
                "vOffset": 100,
                  "alignment": "center",
                    "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
    }
  }
}    

const xmlDoc = create(testJson);
const compl = xmlDoc.end({prettyPrint: true});
console.log(compl);

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Expected behavior
This should work in development mode as well as in production mode.

Version:
node --version
v12.18.0

npm --version
6.14.5

xmlbuilder2@2.1.3

Additional context
Not sure if it is a xmlbuilder2 bug.

If I use xmlbuilder this error is not thrown.

I was able to reproduce the error. I'm looking into it. I am not familier with react that much, so this may take some time.

Thank you for reporting this. It was quite hard to hunt this one, but it was quite an important bug. This should now be fixed with version 2.1.4.

You are welcome. But of course also thank you for fixing it so quickly. Switched back to xmlbuilder2 and it works.