TypeError: Cannot read property 'version' of undefined

Question

I want to make a autocomplete input in ReactJS. Before I used ReactJS, I usually used jQuery for autocomplete. And just because I've been struggled with many of ReactJS' autocompletes and made errors in my website, I decided to return to jQuery's thing.

I usually write the code like common jQuery but this time I just got unusual error:

TypeError: Cannot read property 'version' of undefined at $.widget (home.js:5734)
    at CarouselPage._callee$ (home.js:49729)
    at tryCatch (home.js:46411)
    at Generator.invoke [as _invoke] (home.js:46637)
    at Generator.prototype.(/anonymous function) [as next] (http://localhost.mysite.com/js/home.js:46463:21)
    at asyncGeneratorStep (home.js:49673)
    at _next (home.js:49675)
    at home.js:49675
    at new Promise (<anonymous>)
    at CarouselPage.<anonymous> (home.js:49675)

This is the code that I write:

import React, {Component} from 'react';
import $ from 'jquery-ui';
/* ... some codes ... */
async componentWillMount() {
    $('#location').autocomplete({
      source: '/thislocation/all/name'
    });
}
/* ... more codes ... */
render() {
    let {state} = this;
    return (
  <div className="carousel-home">
       <input type="text" placeholder="Lokasi" name="location" id="location"
          autoComplete="off"/>
  </div>

in /thislocation/all/name URI goes to my controller with getName() function, I just created a hard-coded array to make sure this code works:

public function getName(){
    try{
      return response()->json(['test','123','234']);
    } catch (Exception $exception){
      return response()->json(['error' => $exception->getMessage()], 404);
    }
}

What did I miss in this code?

Nope. The complete home.js component code that contains string version — Hemadri Dasari, Feb 28 '19 at 12:14
@HemadriDasari `home.js` was the builded version of my code. I'm using Laravel with webpack — Ryuujo, Feb 28 '19 at 12:19
You can follow the instruction from https://stackoverflow.com/questions/38836553/how-to-use-jquery-ui-with-react-js/40350880#40350880 — Emrah YILDIRIM, Mar 11 '19 at 03:48

score 7 · Accepted Answer · answered Mar 05 '19 at 21:54

7

You cannot mix React with JQuery. React keeps it's own copy of the DOM and works on it's virtualDOM all the changes, then decides when to write to the real DOM. JQuery uses imperative changes directly to the DOM, since React doesn't read from the DOM, only writes to it, it will not be aware of whatever changes jQuery does. They are polar opposites and you should not mix them.

answered Mar 05 '19 at 21:54

Jose Munoz

558
2
12

actually I still get confused and didn't get the final answer to solve my question. But I choose this answer for now. – Ryuujo Mar 13 '19 at 07:57
They're incompatible because of the way they work, just like you wouldn't mix angular components with vue components, it's just not it chief – Jose Munoz Mar 13 '19 at 15:18

score 1 · Answer 2 · answered Mar 07 '19 at 11:50

You can use refs to integrate with jQuery in react!

I just did this at work last week where i needed to attach a jQuery 'hidden.bs.modal' event listener to a modal window, defined inside componentDidMount.

Try this:
(see componentWillMount & <input ref=...)

import React, {Component} from 'react';
import $ from 'jquery-ui';

  class ....
  /* ... some codes ... */

  async componentWillMount() {
    this.$el = $(this.el);
    this.$el.autocomplete({
      source: '/thislocation/all/name'
    });

    $('#location').autocomplete({
      source: '/thislocation/all/name'
    });
  }

  /* ... more codes ... */ 

  render() {
    let {state} = this;
    return (
      <div className="carousel-home">
        <input ref={el => this.el = el} type="text" placeholder="Lokasi" name="location" id="location"
            autoComplete="off"/>
      </div>
    )
  }```

TypeError: Cannot read property 'version' of undefined

2 Answers2