Chessboardjs NPMパッケージin react、referenceerror $が定義されていません

Question

https://www.npmjs.com/package/chessboardjsパッケージを使用しようとしています。私は単純な反応コンポーネントを書いてボードをレンダリングしましたが、chessboardjsモジュールにエラーがスローされます：ReferenceError：$は定義されていません。部品コード：

import React, { Component } from 'react'; 
import Chess from 'chessboardjs'; 

export default class ChessBoard extends Component { 
    render() { 
     return (
      <div> 
       <div id="chessboard" style={{"width": "400px"}}></div> 
      </div> 
     ) 
    } 

    componentDidMount() { 
     var board = Chess('chessboard'); 
    } 
} 

私はすでにチェス盤の構成要素ではなく、それは残念ながらうまくいかなかったことはJQuery NPMパッケージおよびインポートをインストールしてみました。

これを修正する方法はありますか？

Answer 1

$、jQuery、window.jQuery変数をすべてのモジュールにインポートする必要があると思います。あなたがwebpack1を使用する場合は 、あなたはこれで試すことができます。

providePlugin = new webpack.ProvidePlugin({ 
    $: "jquery", 
    jQuery: "jquery", 
    "window.jQuery": "jquery" 
    }), 

Answer 2

これが最善の方法であるかどうかわからない、

import React, { Component } from 'react'; 
import $ from 'jquery' 
import Chess from 'chessboardjs'; 

window.$ = $ 
window.jQuery = $ 

export default class ChessBoard extends Component { 
    render() { 
     return (
      <div> 
       <div id="chessboard" style={{"width": "400px"}}></div> 
      </div> 
     ) 
    } 

    componentDidMount() { 
     var board = Chess('chessboard'); 
    } 
}