CODEWITHSUNDEEP
javascriptgoogle-chromereactjsatom-editor
Zarkaylia
Zarkaylia

Reputation: 71

React + JS file, Uncaught Error: Minified exception, using Atom + Chrome console

I fell this is a very specific error for my current files and since the error in console is Greek to me...

I am not native English speaker. I am trying to put together React and HTML. I have a search form rendered with React in my HTML file. I need the user input in the input-element sent to the function search() in my javascript file. This I have had help with before and it worked fine for a while.

In my JS-file I have the search function. FOR NOW the result render lies there. I do not expect it to work!

My problem is the error I'm getting. It occurs upon hitting the search button. What does it mean? I can't understand it and thus I can't figure out where I'm doing wrong. Where is the error?

I use a downloaded library, I code in Atom and use Chrome's console.

Below are code + error.

> Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
    at r (react.min.js:16)
    at c._renderValidatedComponent (react.min.js:13)
    at c._updateRenderedComponent (react.min.js:13)
    at c._performComponentUpdate (react.min.js:13)
    at c.updateComponent (react.min.js:13)
    at c.performUpdateIfNecessary (react.min.js:13)
    at Object.performUpdateIfNecessary (react.min.js:15)
    at u (react.min.js:15)
    at r.perform (react.min.js:16)
    at o.perform (react.min.js:16)

    <html>
    <head>
        <meta charset="utf-8">
        <title>Inlämningsuppgift 6</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="js/react.min.js"></script>
        <script src="js/react-dom.min.js"></script>
        <script src="js/browser.min.js"></script>
    </head>
    <body>

      <div id="form_container"></div>
      <div id="movies_list"></div>
      <div id="gifs_list"></div>

      <script type="text/babel">

      "use sctrict";

      var Form = React.createClass({
        search: search, //The search function from js-file attached globaly.

        renderForm: function() {
          return (
            <div className="form_div">
              Movie: <input type="text" className="query"></input>
              //Button calls search function in js-file.
              <button onClick={this.search} className="submit">Search</button>
            </div>
          );
        },

        render: function() {
          return this.renderForm();
        }
      });
      // End of class Form

    ReactDOM.render(<Form />, document.getElementById('form_container'));

    </script>
    <script src="inl6.js"></script>
  </body>

</html>

    function search(event) {
  event.preventDefault();
  //Variables
  var movies_list = document.getElementById('movies_list');
  var gifs_list = document.getElementById('gifs_list');

  //Input validation and handling
  if(this.elements.query.value === '') {
    alert("Ange ett sökord!");
  } else {
    var rawInputData = this.elements.query.value;
    var fixedInputData = rawInputData.split(" ");
    var inputData = encodeQueryData(fixedInputData);
    var inputDatagif = encodeQueryDatagif(fixedInputData);

    //URL encoding functions
    function encodeQueryData(data) {
       let ret = [];
       for (let d in data)
         ret.push(encodeURIComponent(data[d]));
       return ret.join('%20');
    }

    function encodeQueryDatagif(data) {
       let ret = [];
       for (let d in data)
         ret.push(encodeURIComponent(data[d]));
       return ret.join('+');
    }

    // Objekt to handle AJAX
    var omdbAPI = new XMLHttpRequest();
    var gifAPI = new XMLHttpRequest();
    //Set URLs
    var omdbURL = "http://www.omdbapi.com/?s=" + inputData + "&type=movie";
    var gifURL = "http://api.giphy.com/v1/gifs/search?q=" + inputDatagif + "&limit=1&api_key=dc6zaTOxFJmzC";

    //Handle search response, validate and act
    omdbAPI.addEventListener("load", function() {
      if (this.responseText === '{"Response":"False","Error":"Movie not found!"}')
      {
        alert("Sökningen gav inget resultat.");
      } else {
        //Convert from JSON
        var result = JSON.parse(this.responseText);
        var entries = result.Search;

        //Loop through recieved object and display result.
        for(var entry_key in entries) {
          //control that property is own by the object (not prototype)
          if(entries.hasOwnProperty(entry_key)) {
              //Access the entry
              var entry = entries[entry_key];
              //Display result
            var movie_line = "<p><strong>Title:</strong> " + entry.Title + " (year: " + entry.Year + ")</p>";
            console.log(movie_line);
            movies_list.innerHTML += movie_line;
          }
        }
      }
    });

    //Rinse and repeat above for gifs and Giphy API
    gifAPI.addEventListener("load", function() {
      if (this.responseText === '{"Response":"False","Error":"Movie not found!"}')
      {
        alert("Sökningen gav inget resultat.");
      } else {
        var result = JSON.parse(this.responseText);
        var gifs = result.data;

        for(var entry_key in gifs) {
          if (gifs.hasOwnProperty(entry_key)) {
            var gif = gifs[entry_key];
            var gif_line = "<img src='" + gif.url + "'></img>";
            gifs_list.innerHTML += gif_line;
          }
        }
      }
    });

    //Send
    omdbAPI.open("get", omdbURL, true);
    omdbAPI.send();
    gifAPI.open("get", gifURL, true);
    gifAPI.send();
  }
}

Upvotes: 0

Views: 4184

Answers (3)

Joe Clay
Joe Clay

Reputation: 35787

You're using the minified versions of React and ReactDOM, which are only meant to be used when you deploy your application out into the wild. They're a lot smaller and faster, but this comes at the cost of a lot of the nice development features being stripped out. This includes all the error messages, which is why they seem so confusing to you!

To fix this, you should make sure you're using the uncompressed, development versions of React and ReactDOM. While generally you should be using NPM and a module bundler like Webpack to install them into your project (or a scaffolding tool like create-react-app), if you just want to download the files you can do so here:

Once you've replaced the scripts, you'll be able to see what the actual error message is.

Upvotes: 2

Luzan Baral
Luzan Baral

Reputation: 3698

You'll have to set NODE_ENV to development to solve the issue.

set NODE_ENV=development

More conveniently configure your package.json accordingly: "scripts": { "start": "set NODE_ENV=production && node app" }

This is for Windows.

Upvotes: 0

Steeve Pitis
Steeve Pitis

Reputation: 4443

Actually your error tell you to develop with the non-minified file, in order to see the real error.

So just replace your script injection (react.min.js => react.js, etc ...)

Upvotes: 1

Related Questions