Tried a simple Tree with Bootstrap components, IE11 throws error.

[ashokramkumar]

Describe the bug
IE11 throws crypto error.

Reproduction steps
Created a small react app and included a simple node, IE11 errors out.

import CheckboxTree from 'react-checkbox-tree';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const nodes = [{
value: '24157',
label: 'ar Demo Retail (24157)',
children: [
{ value: '465104', label: 'ar Demo Adv Deposit' },
{ value: '465062', label: 'ar Demo Hotel' },
{ value: '465070', label: 'ar Demo Restaurant' },
{ value: '465054', label: 'ar Demo Retail' },
{ value: '465088', label: 'ar Demo Auto Rental' },
{ value: '465096', label: 'ar Demo e-Commerce' },
],
}];

export default class Account extends React.Component {
state = {
checked: [],
expanded: [],
};

render() {
    return (
        <CheckboxTree
            nodes={nodes}
            checked={this.state.checked}
            expanded={this.state.expanded}
            onCheck={checked => this.setState({ checked })}
            onExpand={expanded => this.setState({ expanded })}
            icons={{
                check: <FontAwesomeIcon className="rct-icon rct-icon-check" icon="check-square" />,
                uncheck: <FontAwesomeIcon className="rct-icon rct-icon-uncheck" icon={['far', 'square']} />,
                halfCheck: <FontAwesomeIcon className="rct-icon rct-icon-half-check" icon="check-square" />,
                expandClose: <FontAwesomeIcon className="rct-icon rct-icon-expand-close" icon="chevron-right" />,
                expandOpen: <FontAwesomeIcon className="rct-icon rct-icon-expand-open" icon="chevron-down" />,
                expandAll: <FontAwesomeIcon className="rct-icon rct-icon-expand-all" icon="plus-square" />,
                collapseAll: <FontAwesomeIcon className="rct-icon rct-icon-collapse-all" icon="minus-square" />,
                parentClose: <FontAwesomeIcon className="rct-icon rct-icon-parent-close" icon="folder" />,
                parentOpen: <FontAwesomeIcon className="rct-icon rct-icon-parent-open" icon="folder-open" />,
                leaf: <FontAwesomeIcon className="rct-icon rct-icon-leaf-close" icon="file" />
            }}
        />
    );
}

}
Expected behavior
Tree to load in IE11 without any problems

Screenshots

[Jake Zatecky]

That's probably due to the nanoid dependency used to generate unique IDs for the DOM elements and IE11 having limited cryptographic support. I wonder if you supply the id property to the three if it will avoid the cryptographic error or if the dependency auto-loads.

I will be frank that I have little desire to support IE11 and supposedly Microsoft is dropping support in 2022. Hopefully supplying the id property will solve the issue for you. Otherwise, a (much) older version of this library did not use nanoid and should be compatible with IE11, but I would have to look that up.

You can also try using a crypto polyfill.

[Jake Zatecky]

Closing due to lack of response.