TypeError in using React app with jquery plugins

Question

I created an app with react-create-app command and i use the react 16. i want to use katrik-v fileinput (a jquery plugin) too. that is my code:

import React, { Component } from 'react';
import { Grid, Cell }  from 'react-foundation';
import Header from './Heaader';
import $, { jQuery } from 'jquery';

class New extends Component {

componentDidMount(){
    $(document).find('#root').find('#test-upload').fileinput();
}


render(){
    return (
        <div>
          <Grid type="x">
               <Cell medium={2} large={2} >
                    <label htmlFor="image" className="text-right middle">
                           <p className="form-label">Images</p></label>
               </Cell>
               <Cell medium={8} large={8}>
                    <div className="file-loading">
                        <input id="test-upload" ref='fff' type="file" 
                        multiple />
                    </div>
               </Cell>
         </Grid>
      </div>)
}
}
export default New;

When I call it in the index.js:

ReactDOM.render(<App />, document.getElementById('root'));

I'm facing this error:

TypeError: __WEBPACK_IMPORTED_MODULE_4_jquery___default(...)(...).find(...).find(...).fileinput is not a function.
$(document).find('#root').find('#test-upload').fileinput()

what is the problem?
In general, how can these two be merged?(a jquery plugin and react app)

Include jQuery and its plugin in your app's public/index.html using standard <script> tags. Then replace the line that imports jQuery with /* global $ */. — user5734311
– user5734311, Commented Dec 5, 2017 at 0:35
In the index.html everything is right. Should I change this line?(import $ from ''jquery''). What should I replace? — MHF
– MHF, Commented Dec 5, 2017 at 0:40
Replace import $, { jQuery } from 'jquery'; with /* global $ */ — user5734311
– user5734311, Commented Dec 5, 2017 at 0:42
Thanks @Chris, i'm amateur. please explain what this line does? — MHF
– MHF, Commented Dec 5, 2017 at 0:47
It allows you to use the $ object from your <script> inside your React code. Did it work? — user5734311
– user5734311, Commented Dec 5, 2017 at 0:48

user5734311 · Accepted Answer · 2017-12-05 12:31:41Z

1

In order to use jQuery plugins with React apps, you should pull jQuery out of the webpack process.

Include jQuery and the plugins as static files or via CDN using <script> tags in your public/index.html.

To use jQuery in your React files, add

/* global $ */

Collectives™ on Stack Overflow

TypeError in using React app with jquery plugins

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related