React-sortable-tree: ReferenceError: self is not defined

[vaheqelyan]

i got an error

ReferenceError: self is not defined
    at C:\Users\Admin\Desktop\with-mobx\node_modules\react-sortable-tree\dist\umd\react-sortable-tree.js:1053:40
    at C:\Users\Admin\Desktop\with-mobx\node_modules\react-sortable-tree\dist\umd\react-sortable-tree.js:1050:65
    at module.exports (C:\Users\Admin\Desktop\with-mobx\node_modules\react-sortable-tree\dist\umd\react-sortable-tree.js:1060:77)
    at Object.<anonymous> (C:\Users\Admin\Desktop\with-mobx\node_modules\react-sortable-tree\dist\umd\react-sortable-tree.js:2200:31)
    at __webpack_require__ (C:\Users\Admin\Desktop\with-mobx\node_modules\react-sortable-tree\dist\umd\react-sortable-tree.js:41:38)
    at Object.obj.__esModule.default (C:\Users\Admin\Desktop\with-mobx\node_modules\react-sortable-tree\dist\umd\react-sortable-tree.js:1408:9)
    at __webpack_require__ (C:\Users\Admin\Desktop\with-mobx\node_modules\react-sortable-tree\dist\umd\react-sortable-tree.js:41:38)
    at Object.<anonymous> (C:\Users\Admin\Desktop\with-mobx\node_modules\react-sortable-tree\dist\umd\react-sortable-tree.js:98:34)
    at __webpack_require__ (C:\Users\Admin\Desktop\with-mobx\node_modules\react-sortable-tree\dist\umd\react-sortable-tree.js:41:38)
    at obj.__esModule.default (C:\Users\Admin\Desktop\with-mobx\node_modules\react-sortable-tree\dist\umd\react-sortable-tree.js:67:37)
    at C:\Users\Admin\Desktop\with-mobx\node_modules\react-sortable-tree\dist\umd\react-sortable-tree.js:68:6
    at installedModules.(anonymous function).exports (C:\Users\Admin\Desktop\with-mobx\node_modules\react-sortable-tree\dist\umd\react-sortable-tree.js:2:80)
    at Object.<anonymous> (C:\Users\Admin\Desktop\with-mobx\node_modules\react-sortable-tree\dist\umd\react-sortable-tree.js:3:2)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)

import React from 'react';
import SortableTree from 'react-sortable-tree';

export default class Page extends React.Component {
    state = {
        treeData: [{ title: 'Chicken', children: [{ title: 'Egg' }] }]
    };
    render() {
        return (
            <div style={{ height: 400 }}>
                <SortableTree
                    treeData={this.state.treeData}
                    onChange={treeData => this.setState({ treeData })}
                />
            </div>
        );
    }
}

[nantaphop]

@vaheqelyan Hi! I face the same problem on Next.js
The problem is you can't import this module on server side because of the old version of style-loader.

Work around that work for me is create some kind of proxy component that dynamically require react-sortable-tree only on client side.

Take a look at following image for that component.

[vaheqelyan]

Thanks a lot @nantaphop .it works as it should

[Scredi]

Hello there,

having same issue on next.js. Trying to create a tree with removenode, addnode and other features.
I can see the tree but the features are not defined. I would like to know if you have an example of how import some specific method from SortableTree with next.js or SRR.

i import the tree like this

componentWillMount() { _SortableTree = require('react-sortable-tree').default }

would like to achieve this but different way

import { addNodeUnderParent, removeNodeAtPath } from 'react-sortable-tree'

this causing window is not defined.
Thanks for futur help :)

[fritz-c]

The library has been updated in v2.0.0 to not use style-loader any more, instead requiring you to import the styles yourself. This should make using react-sortable-tree in server-side-rendered apps easier.