Comments (13)
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.
from react-sortable-tree.
@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.
from react-sortable-tree.
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.
from react-sortable-tree.
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?
from react-sortable-tree.
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.
from react-sortable-tree.
@fritz-c any suggestions how to fix it without extracting the styles?
from react-sortable-tree.
@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
.
from react-sortable-tree.
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 :)
from react-sortable-tree.
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
?
from react-sortable-tree.
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:
_SortableTree = require('react-sortable-tree').default;
this.props.setTreeData(this.props.initialData);
from react-sortable-tree.
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 :)
from react-sortable-tree.
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'
from react-sortable-tree.
closing as it seems to be resolved
from react-sortable-tree.
Related Issues (20)
- How to use props with redux ? HOT 1
- React version dependency issue HOT 5
- how to make search nodes only starting from one node which we clicked ?
- Is it possible to make the react sortable tree ui less big with a setting : sm, md, bg ?
- React dnd upgrade HOT 2
- How to customize move handler? 🤔 HOT 2
- div is fadeout when drag
- Insert node at specific index under parent node.Iindex HOT 1
- It is possible to use a node as ReactRef() ? HOT 1
- Give Children another label/property name
- Failed to minify the code error HOT 2
- getTreeFromFlatData set rootKey as null
- Support multiple dragging
- Option to snap automatically to nearest possible level HOT 1
- Support React 18 HOT 1
- new child is added to the parent when collapsing the parent HOT 1
- Using the react-sortable-tree in react 18 HOT 4
- is it possible to display the tree as a vertical tree diagram?
- About maintenance of this library
- Could not resolve dependency: React 18 with [email protected] HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-sortable-tree.