Paquet NPM Chessboardjs dans react, referenceerror $ n'est pas défini

Question

J'essaie d'utiliser le paquet https://www.npmjs.com/package/chessboardjs. J'ai écrit un composant de réaction simple pour rendre le tableau, mais il génère une erreur dans le module chessboardjs: ReferenceError: $ n'est pas défini. Le code du composant:

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

je l'ai déjà essayé d'installer le paquet NPM JQuery et que l'importation dans le composant, mais Échiquier il ne fonctionne malheureusement pas.

Y at-il un moyen de résoudre ce problème?

Answer 1

Je pense que vous devriez importer les variables $, jQuery, window.jQuery dans tous les modules. Si vous utilisez webpack1, vous pouvez essayer par ceci:

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

Answer 2

Je ne sais pas si cela est la meilleure façon,

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