react-with-styles icon indicating copy to clipboard operation
react-with-styles copied to clipboard

Cannot read property 'create' of undefined

Open bukinoshita opened this issue 7 years ago • 5 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.

bukinoshita avatar Sep 24 '17 19:09 bukinoshita

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.

dmiller9911 avatar Oct 10 '17 02:10 dmiller9911

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

ljharb avatar Oct 10 '17 04:10 ljharb

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

bukinoshita avatar Oct 10 '17 16:10 bukinoshita

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.

dmiller9911 avatar Oct 10 '17 16:10 dmiller9911

Nope, please do!

ljharb avatar Oct 11 '17 01:10 ljharb