react jquery-uiを使う

Question

import React from 'react';
import $ from 'jquery';

class Test extends React.Component{

	componentDidMount() {
		var $left = $(".left");
		var $right = $(".right");
		$left.resizable();
	}
	render() {
		return (
			<div>
				<div class="l">aaa</div>
				<div class="r">bbb</div>
			</div>
		)
	}

}

上記はわかりやすくするため必要な部分のみ抜粋しています。

あるエリアをドラッグしたく、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などいろいろ
試してみたのですがだめなようで、
どうしたらよいでしょうか？

Answer 1

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 (
			<div>
				<div className="left" ref="left">aaa</div>
			</div>
		)
	}

}

render(<Test />, 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に取り付けたイベントリスナーを外してあげないとメモリーリークの原因になるので注意して下さい。

Comments

[cheche0830]

ありがとうございます！試してみます！

[HayatoKamono]

一応、動作確認済みです。

[cheche0830]

jsは問題なく動きました！ただ、
ドラッグ可能にした要素内に
class="ui-resizable-handle ui-resizable-e"
というドラッグできるハンドル部分が生成されるかとおもうのですが、
こちらにcssがあたっていないようで・・・
おそらくcssが読み込まれていないようなのですが、

import 'jquery-ui/themes/base/resizable.css';
以外に何か読み込むひつようがありますでしょうか？

[HayatoKamono]

react内であれば、classではなく、classNameにするって話ですかね？
私が掲載したデモコードでは'<div className="left" ref="left">aaa</div>'となってますので確認してみてください。

[cheche0830]

いったんいただいたものをそのままやってみてるのですが、ドラッグできる部分の境目にマウスをホバーさせてもリサイズ可能アイコンに切り替わらない（そのcssがそもそも読み込まれていない？）ようで・・・
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
}
このcssがあたらないといけないはずなんですが（これに限らずresizable.cssがすべてあたっていない）開発ツールで見てもみあたらず・・・
ちょっといろいろ試してみます・・

[cheche0830]

もしかするとcss-loaderを使っているのが原因でしょうか・・・

[HayatoKamono]

とりあえず質問自体は解決してると思うので一旦閉じて別質問として投稿して頂けますか？その方がほかの方から回答を貰えやすいと思うので。

[cheche0830]

はい！ありがとうございました！