Comments (15)
@thomashibbard same window not defined issue even with NoSSR. I finally got it working by doing a inline import
const Tree = require('react-d3-tree').Tree;
return (
<div style={{width: '100vw', height: '100vh'}}>
<Tree data={data} onClick={this.onClick} />
</div>
);
from react-d3-tree.
let Tree = ' '
class MyComponent extends React.PureComponent {
state = {
redender: false
};
async componentDidMount() {
let res = await import("react-d3-tree");
Tree = res.Tree;
this.setState({ redender: true, window });
}
render() {
return <div style={{ height: 1000, width: 1000 }}>{this.state.redender && <Tree data={myTreeData} />}</div>;
}
}
this worked for me
from react-d3-tree.
Hi @bkrem Thank you for your almost instantaneous answer.
Yes, I checked that too.
I built it without UglifyJsPlugin and it's used for
isOldIE = memoize(function() {
// Test for IE <= 9 as proposed by Browserhacks
// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
// Tests for existence of standard globals is to allow style-loader
// to operate correctly into non-standard environments
// @see https://github.com/webpack-contrib/style-loader/issues/177
return window && document && document.all && !window.atob;
}),
I investigated problem a little
https://github.com/webpack-contrib/style-loader/blob/67120f8dc831626f466d64513b4e26074e89341b/lib/addStyles.js#L23
Problem occures during import
// react-d3-tree.js
module.exports = function(list, options) {
// Here DEBUG is not defined
if (typeof DEBUG !== "undefined" && DEBUG) {
if (typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
}
options = options || {};
options.attrs = typeof options.attrs === "object" ? options.attrs : {};
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
if (!options.singleton) options.singleton = isOldIE();
from react-d3-tree.
@codemonkeycxy you can also use npm's package react-no-ssr as a workaround
https://github.com/kadirahq/react-no-ssr/blob/master/src/index.js
from react-d3-tree.
Hi @KrzysztofKarol, thank you for reporting this! I was actually unaware of how/if this library worked with SSR.
The source doesn't make any reference to document
/window
, so seems to be a bundling/dependency issue, will look into this after work today.
As a workaround until this is implemented you could maybe render the tree on componentDidMount
to ensure it renders in the client?
from react-d3-tree.
Ahh interesting, thanks for digging into this already.
Seems like the least path of resistance would be to set options.singleton
if it's part of the style-loader
public API since IE 8 and older isn't supported by the React team anymore anyways.
Otherwise it would be worth working around the style-loader
plugin if that gets SSR working.
If you have an idea feel free to put in a PR @KrzysztofKarol, otherwise I'll check this out in detail this evening :)
from react-d3-tree.
I couldn't find simple and good solution. So i made it very dirty way for now - I used isomorphic-style-loader instead of style-loader.
KrzysztofKarol@f876afe
BTW. I also encountered a problem with react-transition-group
. react-d3-tree uses 1.1.3 as external and it's somehow overriding 2.2.1 used by material-ui@next.
from react-d3-tree.
Ok cool, good to hear you found a way. If isomorphic-style-loader
seems to do the job I'll move the build pipeline to that.
Ok that's a strange one regarding react-transition-group
, might make sense to bundle the dependencies directly rather than using externals in that case.
Thanks for reporting these two already, super useful! 🙌
from react-d3-tree.
@bkrem @KrzysztofKarol Is this issue fixed? Somehow I'm still seeing the same error during server side rendering.
amazing work by the way, looking forward to using it!
from react-d3-tree.
Hi @codemonkeycxy!
I wasn't using this lib for months so you have to ask @bkrem directly.
from react-d3-tree.
Hi @codemonkeycxy,
SSR still isn't technically supported. I spent an entire day at the time tinkering with the isomorphic loader that Krzysztof suggested (and one or two other ones).
I couldn't get a stable version out of it and there were more pressing issues to resolve with the library so I closed this as out of scope (sorry for my lack of explanation when I closed it), since this error is preventable if you await componentDidMount()
like so:
class MyTreeComponent extends React.PureComponent {
state = {
didMount: false
}
componentDidMount() {
this.setState({
didMount: true
})
}
render() {
<div>{this.state.didMount && <Tree />}</div>
}
}
I'm aware that this isn't optimal (setState
in componentDidMount
will cause an extra render call) and adds some boilerplate, but I simply haven't had the time to get the SSR issue resolved recently.
I hope this helps as a workaround for now and I will obviously update the issue once a fix is in place!
from react-d3-tree.
@KrzysztofKarol How is this meant to be used?
I see it's a component on NPM now, but I'm still getting window is not defined when used like:
const Root = () => (
<Provider store={store}>
<NoSSR>
<ComponentThatUsesWindow />
</NoSSR>
</Provider>
)
from react-d3-tree.
@thomashibbard I think yes but this repo has latest commit dated on 9 Apr 2016 so I don't know how does it work with latest React versions.
You can report an issue https://github.com/kadirahq/react-no-ssr/issues but I think that no one is maintaining this lib anymore, sadly.
from react-d3-tree.
If anyone is still strugling ?
For Imports
if (canUseDOM()) {
const ReactD3Tree = require('react-d3-tree');
Tree = ReactD3Tree.default;
}
For Usage
if (!canUseDOM()) return null;
return (
Function (canUseDOM)
export function canUseDOM() {
return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
}
from react-d3-tree.
Any update with integration of this to Gatsby?
from react-d3-tree.
Related Issues (20)
- onNodeOver event works also onClick?
- how to style node elements using jsx
- Is it possible to add Scroll bars to view the chart?
- draggable prop issue HOT 3
- [question] Default tree is not centered and nodes are cut off HOT 1
- LeafNode still not targeted correctly HOT 1
- Is there a way to open previous node on route back to page having react-d3-tree.im routing user to next page from react d3tree.
- Is there a search option available to open d3tree and show ?
- Cannot find a declaration file for module HOT 3
- How to use non-copyable objects as data?
- Getting error: selection2.interrupt is not a function at zoom.transform
- How to center a node HOT 1
- Safari: foreignobject render issue HOT 2
- Zoom and Drag not working on NextJS HOT 2
- How to center a node on from external event
- Tree not centering when using renderCustomNodeElement prop
- This is having older version of "@bkrem/react-transition-group": "^1.3.3", in package.json.
- How to restrict the drag area?
- Intersection bug
- Codesandbox examples not available 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-d3-tree.