Question

我正在尝试使用https://www.npmjs.com/package/chessboardjs包。我编写了简单的react组件来渲染板，但它在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软件包并将其导入到ChessBoard组件中，但不幸的是它无法正常工作。

有没有办法解决这个问题？

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

Chessboardjs NPM包中的react，referenceerror $未定义

2 个答案: