Server side rendering about react-diagrams

[zacharynevin]

@makamekm There is a workaround:

1. Install react-no-ssr: yarn add react-no-ssr
2. In your webpack client config (not server config), use the ProvidePlugin. For example:

const baseConfig = require('./webpack.config');
const path = require('path');
const webpack = require('webpack')

module.exports = Object.assign({}, {
  entry: './containers/ClientApp.js',
  plugins: [
    new webpack.ProvidePlugin({
      '$storm': 'storm-react-diagrams'
    })
  ]
}, baseConfig);

The $storm variable will be available everywhere in your code.

2. Wrap your DiagramWidget in NoSSR. For example:

import React from 'react'
import NoSSR from 'react-no-ssr'

export default class Example extends React.Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    // setup graph here
    const { DiagramEngine, DiagramModel, DefaultNodeModel } = $storm;
    this.engine = new DiagramEngine()
    ...
  }

  render() {
    const { DiagramWidget } = $storm;

    return (
      <NoSSR>
        <DiagramWidget className="srd-demo-canvas" diagramEngine={this.engine} />
      </NoSSR>
    )
  }
}

Hope this helps!

[dylanvorster]

it is actually not possible to do server side rendering with this library at the moment due to the inherent nature of the dom elements it requires.