Chessboardjs NPM-Paket in reagieren, referenceerror $ ist nicht definiert

Question

Ich versuche https://www.npmjs.com/package/chessboardjs Paket zu verwenden. Ich habe eine einfache reactive Komponente geschrieben, um das Board zu rendern, aber es wirft einen Fehler im schachbrettjs Modul auf: ReferenceError: $ ist nicht definiert. Der Komponentencode:

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'); 
    } 
} 

Ich habe bereits versucht, das JQuery npm Paket und Import der Installation, dass in der Schachbretts Komponente, aber es hat leider nicht funktioniert.

Gibt es eine Möglichkeit, das zu beheben?

Answer 1

Ich denke, Sie sollten die Variablen $, jQuery, window.jQuery in alle Module importieren. Wenn Sie webpack1 verwenden, können Sie durch diese versuchen:

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

Answer 2

Nicht sicher, ob dies der beste Weg ist,

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'); 
    } 
}