Chessboardjs NPM package in react, referenceerror $ is not defined

Question

I am trying to use https://www.npmjs.com/package/chessboardjs package. I wrote simple react component to render the board, but it throws an error in the chessboardjs module: ReferenceError: $ is not defined. The component code:

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

I already tried installing the JQuery npm package and import that in the ChessBoard component but it didn't work unfortunately.

Is there a way to fix this?

Soso hu · Accepted Answer · 2017-06-09 08:51:26Z

3

I think you should import the $, jQuery, window.jQuery variables into all modules. If you use webpack1,you can try by this:

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

answered Jun 9, 2017 at 8:51

Soso hu

311 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Stefanvdk Over a year ago

Thank you for your answer. I'm new to react and the app doesn't use Webpack at the moment. Is there another way to include jQuery in all modules or is Webpack the way to go?

Sherfin Shamsudeen · Accepted Answer · 2017-07-08 17:18:03Z

0

Not sure if this is the best way,

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

answered Jul 8, 2017 at 17:18

Sherfin Shamsudeen

1

Collectives™ on Stack Overflow

Chessboardjs NPM package in react, referenceerror $ is not defined

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related