質問: $(".right"); $left.resizable(); } render() { return ( aaa bbb ) } } ``` 上記はわかりやすくするため必要な部分のみ抜粋しています。 あるエリアをドラッグしたく、jquery-uiのresizableを入れたいのですが、 どうもうまくいきません・・ jqueryのinstallを既にできていて、適当な$("div").click(function() {console.log(111)});とかは 動いています。 jquery-uiのmoduleは既にインストールできているのですが、 それをどうコンポーネントに読み込んだらいいのかわかりません・・ import "jquery-ui"; と記述をしている記事も見てやってみたのですが、 resizable is not functionとエラーが出ます。 大体どのバージョンでも素で組んだhtmlでは動いたので、 バージョン情報は割愛しますが必要な場合は追記いたします。 環境はwebpackを使用しています。 ご協力のほどよろしくお願いいたします。 下記のURLに記載のあるものはすべてやってみましたがどれも not function という同等のエラーでした・・ https://stackoverflow.com/questions/35259835/how-to-import-jquery-ui-using-es6-es7-syntax 追記: import $ from 'jquery'; import 'jquery-ui/themes/base/core.css'; import 'jquery-ui/themes/base/theme.css'; import 'jquery-ui/themes/base/resizable.css'; import 'jquery-ui/ui/core'; import 'jquery-ui/ui/widgets/resizable'; で、jsの方はうまくいっていることがわかりました。 ただ、theme.cssのbackground-image: url("image/ がModule not found: Error: Can't resolve "image/ と画像のパスのえらーがでているようです。 こちら../../node_module、../nodo_moduleなどいろいろ 試してみたのですがだめなようで、 どうしたらよいでしょうか?
回答: ``` import React from 'react'; import { render } from 'react-dom'; import $ from "jquery"; import 'jquery-ui/themes/base/resizable.css'; window.jQuery = $; require('jquery-ui/ui/version'); require('jquery-ui/ui/plugin'); require('jquery-ui/ui/widget'); require('jquery-ui/ui/widgets/mouse'); require('jquery-ui/ui/widgets/resizable'); class Test extends React.Component { componentDidMount() { this.$left = $(this.refs.left); console.log(this.$left.resizable); this.$left.resizable() } render() { return ( aaa ) } } render(, document.getElementById('root')); ``` 参考1 ==== 解決済みイシューがありました。 Test suite failed: jQuery is not defined #2337 同ページにて、ReactチームのDan Abramovが対応策を投稿しています。 https://github.com/facebook/create-react-app/issues/2337 回答欄に掲載したコードは上のリンク先のコードを参考にしています。 > > I would add that this is pretty broken (on jQuery side) as it’s not really compatible with modern bundlers, and you might have better luck using React-specific libraries instead. But it seems to work. > > > Dan Abramovによると、この問題はjQuery側がモダンなバンドラーに上手く適合していないことが原因のようです。 参考2 ==== Integrating with DOM Manipulation Plugins jQueryをreactで使う際のガイド的な内容が載ってます。 > > Note that we defined both componentDidMount and componentWillUnmount lifecycle hooks. Many jQuery plugins attach event listeners to the DOM so it’s important to detach them in componentWillUnmount. If the plugin does not provide a method for cleanup, you will probably have to provide your own, remembering to remove any event listeners the plugin registered to prevent memory leaks. > > > 注意書きがあると通り、componentWillMountでjQuery pluginがDOMに取り付けたイベントリスナーを外してあげないとメモリーリークの原因になるので注意して下さい。