React server side rendering Problem : Invariant Violation: addComponentAsRefTo(...)

I am trying use this plugin with ssr (using this starter kit) and i am following hashtag e.g from draft-js-plugin My code:

export default class Page extends Component {  
  static propTypes = {
    children: PropTypes.object,
    addState: PropTypes.func,
    mobile: PropTypes.bool
  };

  text = "a #TIL: This editor can have all sorts of #hashtags. Pretty #cool :)Try it yourself by starting a word with a # (hash character) …";

  state = {
    editorState: createEditorStateWithText(this.text),
  };

  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  focus = () => {
    this.refs.editor.focus();
  };

  render() {
    const hashtagPlugin = createHashtagPlugin();
    const plugins = [
      hashtagPlugin,
    ];

    return (
      <div className={editorStyles.editor} onClick={this.focus}>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={plugins}
          ref="editor"
        />
      </div>
    );
  }
}

but i am getting the following error: Warning: You are manually calling a React.PropTypes validation function for the decorators prop on PluginEditor. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details. -> many more like these with customStyleMap, defaultKeyBindings, PluginEditor etc.

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) "true" data-editor="4tpi5" data-offset-k (server) "true" data-editor="dibec" data-offset-k - this error always happens in draftjs ssr - #issue385

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component'srendermethod, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner). -

Is there someway to resolve this problem?

UPDATED: on clicking the editor an error shows up: Uncaught TypeError: Cannot read property 'focus' of undefined

package.json

{
  "name": "tutorial",
  "description": "Example of an isomorphic (universal) webapp using react redux and hot reloading",
  "author": "Erik Rasmussen <[e-mail]> (http://github.com/erikras)",
  "license": "MIT",
  "version": "0.9.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/erikras/react-redux-universal-hot-example"
  },
  "homepage": "https://github.com/erikras/react-redux-universal-hot-example",
  "keywords": [
    "react",
    "isomorphic",
    "universal",
    "webpack",
    "express",
    "hot reloading",
    "react-hot-reloader",
    "redux",
    "starter",
    "boilerplate",
    "babel"
  ],
  "main": "bin/server.js",
  "scripts": {
    "start": "concurrent --kill-others \"npm run start-prod\" \"npm run start-prod-api\"",
    "start-prod": "better-npm-run start-prod",
    "start-prod-api": "better-npm-run start-prod-api",
    "build": "better-npm-run build",
    "postinstall": "npm run build",
    "lint": "eslint -c .eslintrc src api",
    "start-dev": "better-npm-run start-dev",
    "start-dev-api": "better-npm-run start-dev-api",
    "watch-client": "better-npm-run watch-client",
    "dev": "concurrent --kill-others \"npm run watch-client\" \"npm run start-dev\" \"npm run start-dev-api\"",
    "test": "karma start",
    "test-node": "./node_modules/mocha/bin/mocha $(find api -name '*-test.js') --compilers js:babel-core/register",
    "test-node-watch": "./node_modules/mocha/bin/mocha $(find api -name '*-test.js') --compilers js:babel-core/register --watch"
  },
  "betterScripts": {
    "start-prod": {
      "command": "node ./bin/server.js",
      "env": {
        "NODE_PATH": "./src",
        "NODE_ENV": "production",
        "PORT": 8080,
        "APIPORT": 3030
      }
    },
    "start-prod-api": {
      "command": "./node_modules/pm2/bin/pm2 start ./bin/api.js",
      "env": {
        "NODE_PATH": "./api",
        "NODE_ENV": "production",
        "APIPORT": 3030
      }
    },
    "start-dev": {
      "command": "node ./bin/server.js",
      "env": {
        "NODE_PATH": "./src",
        "NODE_ENV": "development",
        "PORT": 3000,
        "APIPORT": 3030
      }
    },
    "start-dev-api": {
      "command": "node ./bin/api.js",
      "env": {
        "NODE_PATH": "./api",
        "NODE_ENV": "development",
        "APIPORT": 3030
      }
    },
    "watch-client": {
      "command": "node webpack/webpack-dev-server.js",
      "env": {
        "UV_THREADPOOL_SIZE": 100,
        "NODE_PATH": "./src",
        "PORT": 3000,
        "APIPORT": 3030
      }
    },
    "build": {
      "command": "webpack --verbose --colors --display-error-details --config webpack/prod.config.js",
      "env": {
        "NODE_ENV": "production"
      }
    }
  },
  "dependencies": {
    "babel-core": "^6.5.2",
    "babel-loader": "^6.2.1",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-react-display-name": "^6.3.13",
    "babel-plugin-transform-runtime": "^6.3.13",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "babel-register": "^6.3.13",
    "babel-runtime": "^6.3.19",
    "better-npm-run": "0.0.8",
    "body-parser": "^1.14.1",
    "bootstrap-sass": "^3.3.5",
    "bootstrap-sass-loader": "^1.0.9",
    "compression": "^1.6.0",
    "concurrently": "^0.1.1",
    "draft-js": "^0.8.0",
    "draft-js-export-html": "^0.4.0",
    "draft-js-hashtag-plugin": "^2.0.0-beta.2",
    "draft-js-import-html": "^0.2.0",
    "draft-js-plugins-editor": "^2.0.0-beta.2",
    "express": "^4.13.3",
    "express-session": "^1.12.1",
    "file-loader": "^0.8.5",
    "hoist-non-react-statics": "^1.0.3",
    "http-proxy": "^1.12.0",
    "invariant": "^2.2.0",
    "less": "^2.5.3",
    "less-loader": "^2.2.1",
    "lru-memoize": "^1.0.0",
    "map-props": "^1.0.0",
    "moment-timezone": "^0.5.5",
    "mongodb": "^2.1.18",
    "multireducer": "^2.0.0",
    "piping": "^0.3.0",
    "pm2": "^1.1.3",
    "pretty-error": "^1.2.0",
    "react": "15.0.2",
    "react-bootstrap": "^0.29.5",
    "react-cloudinary": "^0.4.0",
    "react-dom": "15.0.2",
    "react-ga": "^2.1.1",
    "react-helmet": "^3.1.0",
    "react-inline-css": "^2.0.0",
    "react-redux": "^4.0.0",
    "react-router": "2.4.0",
    "react-router-bootstrap": "^0.23.0",
    "react-router-redux": "^4.0.0",
    "react-slick": "^0.12.3",
    "redux": "^3.0.4",
    "redux-connect": "^2.1.0",
    "redux-form": "^3.0.12",
    "scroll-behavior": "^0.3.2",
    "serialize-javascript": "^1.1.2",
    "serve-favicon": "^2.3.0",
    "short": "^2.6.0",
    "socket.io": "^1.3.7",
    "socket.io-client": "^1.3.7",
    "superagent": "^1.4.0",
    "url-loader": "^0.5.7",
    "warning": "^2.1.0",
    "webpack-isomorphic-tools": "^2.2.18"
  },
  "devDependencies": {
    "autoprefixer-loader": "^3.1.0",
    "babel-eslint": "^5.0.0-beta6",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-plugin-typecheck": "^3.6.0",
    "chai": "^3.3.0",
    "clean-webpack-plugin": "^0.1.6",
    "css-loader": "^0.23.1",
    "eslint": "1.10.3",
    "eslint-config-airbnb": "0.1.0",
    "eslint-loader": "^1.0.0",
    "eslint-plugin-import": "^0.8.0",
    "eslint-plugin-react": "^3.5.0",
    "extract-text-webpack-plugin": "^0.9.1",
    "font-awesome": "^4.4.0",
    "font-awesome-webpack": "0.0.4",
    "json-loader": "^0.5.4",
    "karma": "^0.13.10",
    "karma-cli": "^0.1.1",
    "karma-mocha": "^0.2.0",
    "karma-mocha-reporter": "^1.1.1",
    "karma-phantomjs-launcher": "^0.2.1",
    "karma-sourcemap-loader": "^0.3.5",
    "karma-webpack": "^1.7.0",
    "mocha": "^2.3.3",
    "node-sass": "^3.4.2",
    "phantomjs": "^1.9.18",
    "phantomjs-polyfill": "0.0.1",
    "react-a11y": "^0.3.3",
    "react-addons-test-utils": "^15.0.2",
    "react-transform-catch-errors": "^1.0.0",
    "react-transform-hmr": "^1.0.1",
    "redbox-react": "^1.1.1",
    "redux-devtools": "^3.0.0-beta-3",
    "redux-devtools-dock-monitor": "^1.0.0-beta-3",
    "redux-devtools-log-monitor": "^1.0.0-beta-3",
    "sass-loader": "^3.1.2",
    "sinon": "^1.17.2",
    "strip-loader": "^0.1.0",
    "style-loader": "^0.13.0",
    "timekeeper": "0.0.5",
    "webpack": "^1.12.9",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.5.0"
  },
  "engines": {
    "node": "6.3.0"
  }
}

[prashantagarwal]

Sorry , it was because of multiple copies of React were being loaded. My bad.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.