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

[andrewGuscha]

Getting reference error when trying to use react-sortable-tree with universal app.

[tatterdemalion]

I get the same error.

<project_path>/node_modules/react-sortable-tree/dist/umd/webpack:/~/style-loader/addStyles.js:31
    if (typeof options.singleton === "undefined") options.singleton = isOldIE();
^
ReferenceError: window is not defined

I worked it around by importing it in render function as:

render(){
    const SortableTree = require('react-sortable-tree').default;
    return (<SortableTree ... />);
}

This is far from a nice solution, but works for me.

[kulikalov]

Looks like this is happening because of one of the style-loaders. What do you think, @fritz-c ?

Some more details:

[0]             return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
[0]                                        ^
[0] ReferenceError: window is not defined
[0]     at /.../react-sortable-tree/dist/umd/react-sortable-tree.js:1035:40
[0]     at /.../react-sortable-tree/dist/umd/react-sortable-tree.js:1032:65
[0]     at module.exports /.../react-sortable-tree/dist/umd/react-sortable-tree.js:1042:77)
[0]     at Object.<anonymous> /.../react-sortable-tree/dist/umd/react-sortable-tree.js:2010:31)
[0]     at __webpack_require__ /.../react-sortable-tree/dist/umd/react-sortable-tree.js:41:38)
[0]     at Object.obj.__esModule.default /.../react-sortable-tree/dist/umd/react-sortable-tree.js:1306:9)
[0]     at __webpack_require__ /.../react-sortable-tree/dist/umd/react-sortable-tree.js:41:38)
[0]     at Object.<anonymous> /.../react-sortable-tree/dist/umd/react-sortable-tree.js:98:34)
[0]     at __webpack_require__ /.../react-sortable-tree/dist/umd/react-sortable-tree.js:41:38)
[0]     at obj.__esModule.default /.../react-sortable-tree/dist/umd/react-sortable-tree.js:67:37)

May be it worth to abstract styles from js and let users to load it as they prefer?

[fritz-c]

I would like to extract the styles from js at some point, but since it takes more than a trivial configuration fix, it's going to be difficult to fit in any time soon.

[kulikalov]

@fritz-c any suggestions how to fix it without extracting the styles?

[fritz-c]

@anton-aleksandrov I don't have much experience with universal apps, but I recall hearing something about holding off requiring the library until you are in the browser environment. It probably ends up looking similar to tatterdemalion's solution, but the require would preferably not be in render.

[kulikalov]

Sorry, I did not refer to universal apps. I'm using your code in a regular isomorphic reactjs web-app. Tatterdemalion's solution doesn't work for me because i need to render the same components on server and on client sides. If there is no quick solution to this. I'll be looking how to extract styles from there on my own. Any advice would be appreciated :)

[dmitru]

In my setup (I'm using react-redux-universal-hot-example boilerplate), tatterdemalion's solution worked only after I've updated this project's style-loader version to the recent 0.16.1.

Before that, I was getting this error:

[1] PROJECT/node_modules/react-sortable-tree/dist/umd/react-sortable-tree.js:1055
[1]             return /msie [6-9]\b/.test(self.navigator.userAgent.toLowerCase());
[1]                                        ^
[1]
[1] ReferenceError: self is not defined

@fritz-c Could you please update the version of style-loader?

[nantaphop]

@andrewGuscha @dmitru @anton-aleksandrov @fritz-c
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.

It look like @tatterdemalion 's work around but my solution might be better because we didn't require in every rendering process, just require it once in componentDidMount

Take a look at following image for that component.

[emasch]

Note that in the Workaroud from @nantaphop it is necessary to change the state or the props of the component, so a rerender will be triggered. Otherwise the component won't be shown.

In case you want to copy and paste some code:
javascript _SortableTree = require('react-sortable-tree').default; this.props.setTreeData(this.props.initialData);

[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 :)

[Scredi]

Nevermind, i find a solution by copying the whole tree-data-utils.js and importing it at the top of my component sheet :)

import { addNodeUnderParent, removeNodeAtPath } from './utils/tree-data-utils'

[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.

[lifejuggler]

closing as it seems to be resolved