title: How to Use Tableau WDC in a ReactJs app the correct way
body: <p>I keep getting this error ReferenceError: Can't find variable: Set file: <a href="http://localhost:1337/bundle.min.js" rel="nofollow noreferrer">http://localhost:1337/bundle.min.js</a> line: 33098</p>
  
  <p>It looks like window.tableau.getSchema() and myConnector.getData() have never been called. I add a log message, but it has never been executed.
  Solution from @redec is to add polyfill for react. But I still got error.
  Here is my html</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
  
      &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
        &lt;title&gt;Dashboard&lt;/title&gt;
        &lt;link rel="shortcut icon" href="favicon.ico"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
        &lt;div id="app"&gt;
        &lt;/div&gt;
        &lt;script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"&gt;&lt;/script&gt;
  
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.2.5/polyfill.min.js"
        type="text/javascript"&gt;&lt;/script&gt;
      &lt;/body&gt;
  
      &lt;/html&gt;  
  </code></pre>
  
  <p>Here is the component that will display on Tableu WDC, the route will be enter via WDC on Tableu Desktop app is <a href="http://localhost:1337/tableau/wdc" rel="nofollow noreferrer">http://localhost:1337/tableau/wdc</a></p>
  
  <pre><code>    import React, { Component } from 'react';
  class TableauWDC extends Component {
      constructor(props, context) {
          super(props, context);
          this.state = {
              isScriptLoaded: false
          };
  
      }
      componentDidMount() {
          // Create the connector object
          var myConnector = window.tableau.makeConnector();
  
          // Define the schema
          myConnector.getSchema = function (schemaCallback) {
              window.tableau.log("getSchema")
              var cols = [{
                  id: "id",
                  dataType: window.tableau.dataTypeEnum.string
              }, {
                  id: "mag",
                  alias: "magnitude",
                  dataType: window.tableau.dataTypeEnum.float
              }, {
                  id: "title",
                  alias: "title",
                  dataType: window.tableau.dataTypeEnum.string
              }, {
                  id: "location",
                  dataType: window.tableau.dataTypeEnum.geometry
              }];
  
              var tableSchema = {
                  id: "earthquakeFeed",
                  alias: "Earthquakes with magnitude greater than 4.5 in the last seven days",
                  columns: cols
              };
  
              schemaCallback([tableSchema]);
          };
  
          // Download the data
          myConnector.getData = function (table, doneCallback) {
              window.tableau.log("getData")
              this.loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson',
                  function (data) {
                      var feat = data.features,
                          tableData = [];
  
                      // Iterate over the JSON object
                      for (var i = 0, len = feat.length; i &lt; len; i++) {
                          tableData.push({
                              "id": feat[i].id,
                              "mag": feat[i].properties.mag,
                              "title": feat[i].properties.title,
                              "location": feat[i].geometry
                          });
                      }
  
                      table.appendRows(tableData);
                      doneCallback();
                  },
                  function (xhr) { console.error(xhr); }
              );
          };
  
          window.tableau.registerConnector(myConnector);
      }
      loadJSON(path, success, error) {
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function () {
              if (xhr.readyState === XMLHttpRequest.DONE) {
                  if (xhr.status === 200) {
                      if (success)
                          success(JSON.parse(xhr.responseText));
                  } else {
                      if (error)
                          error(xhr);
                  }
              }
          };
          xhr.open("GET", path, true);
          xhr.send();
      }
      submit() {
          window.tableau.connectionName = "USGS Earthquake Feed"; // This will be the data source name in Tableau
          window.tableau.submit(); // This sends the connector object to Tableau
      }
  
      render() {
          return (
              &lt;div style={{
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  height: "calc( 90vh - 65px)"
              }}&gt;
  
                  &lt;button onClick={() =&gt; this.submit()} className="btn btn-success" &gt;Get Earthquake Data!&lt;/button&gt;
              &lt;/div&gt;
          );
      }
  }
  
  
  
  export default TableauWDC;
  </code></pre>
  
  <p>I keep getting these errors.</p>
  
  <p>A snippet from the error is below here</p>
  
  <pre><code>The web data connector has reported an unrecoverable error and cannot proceed. If the connector has reported details of the error, they are displayed in the pane below.
  Script error. file: line: 0 
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Z4atU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z4atU.png" alt="enter image description here"></a></p>