airbnb / react-with-styles

Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot read property 'create' of undefined

bukinoshita opened this issue · comments

I'm getting Cannot read property 'create' of undefined and don't know why. I followed the examples and still getting this.

// theme.js

export default {
  color: {
    primary: '#FF5A5F',
    secondary: '#00A699'
  }
}
// styles.js

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'
import { css, withStyles } from 'react-with-styles'
import MyTheme from './theme'

ThemedStyleSheet.registerTheme(MyTheme)

export { css, withStyles, ThemedStyleSheet }
// index.js

import React from 'react'
import PropTypes from 'prop-types'
import { css, withStyles } from './styles'

function MyComponent({ styles }) {
  return (
    <div>
      <a href="/somewhere" {...css(styles.firstLink)}>
        A link to somewhere
      </a>{' '}
      and{' '}
      <a href="/somewhere-else" {...css(styles.secondLink)}>
        a link to somewhere else
      </a>
    </div>
  )
}

MyComponent.propTypes = {
  styles: PropTypes.object.isRequired
}

export default withStyles(({ color }) => ({
  firstLink: {
    color: color.primary
  },

  secondLink: {
    color: color.secondary
  }
}))(MyComponent)

If I export like this

export default withStyles()(MyComponent)

it works just fine, but I don't have the styles.

Did you register an interface ? I don't see one from your example. There is an example of registering an interface here:

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
...
ThemedStyleSheet.registerInterface(aphroditeInterface);
..

If you don't want to use aphrodite for the interface there are some others listed here.

We should figure out a way to make a better error message there, regardless.

Okay, using aphroditeInterface fixed the issue. I didn't know that I needed to add an interface, I thought it was optional. (maybe add on readme that interface is required(?))

We should figure out a way to make a better error message there, regardless.

It would be better with a better error message

Thanks @dmiller9911

Glad that got you working. I will be working to add errors for not registering theme/interface later this week unless @ljharb is already working on something.

Nope, please do!