TypeError: Cannot read property 'purple25' of undefined

[leavest]

When I install weaveworks-ui-components by yarn.

warning " > weaveworks-ui-components@0.14.0" has unmet peer dependency "font-awesome@^4.0.0".
warning " > weaveworks-ui-components@0.14.0" has unmet peer dependency "lodash@^4.0.0".
warning " > weaveworks-ui-components@0.14.0" has unmet peer dependency "moment@^2.0.0".
warning " > weaveworks-ui-components@0.14.0" has unmet peer dependency "styled-components@^2.0.0".

I have to manually download these 4 dependencies.

---

I write a demo,

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { WeaveLogo, GraphNode } from "weaveworks-ui-components";

ReactDOM.render(
  <div className="App">
    <header className="App-header">
      <WeaveLogo />
      <svg width="800px" height="600px">
        <GraphNode
          id="animated-node"
          shape="pentagon"
          label="node"
          isAnimated
          contrastMode={false}
        />
      </svg>
    </header>
  </div>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

and get this error.
TypeError: Cannot read property 'purple25' of undefined
(anonymous function)
node_modules/weaveworks-ui-components/lib/components/GraphNode/_GraphNodeStatic.js:258

How can i use this componment?

[leavest]

Here is my package.json:

{
  "name": "antd-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "font-awesome": "^4.0.0",
    "lodash": "^4.0.0",
    "moment": "^2.0.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "2.0.5",
    "styled-components": "^2.0.0",
    "weaveworks-ui-components": "^0.14.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

[fbarl]

Thank you @leavest for this very thorough report!

I will take a look at it today and try to get back to you with a PR this week.

[fbarl]

So it seems like there were two separate issues here:

• Long list of peer dependencies - I opened Remove some items from peer dependencies #417 to address that separately
• The error thrown because <ThemeProvider /> wrapper was missing - I created Updated README with styled theme usage instruction #419 which documents the usage better for now and suggested a change RFC: Wrap every exported component with its own theme provider  #418 which would make this redundant in the future and simplify the usage of this repo

If both #417 and #418 are accepted and resolved, then the only dependency will be React and one will be able to simply import and use our components like in your code above.

In the meantime, please take a look at #419 to get on with your app :)