Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read property 'create' of undefined #102

Open
bukinoshita opened this issue Sep 24, 2017 · 5 comments
Open

Cannot read property 'create' of undefined #102

bukinoshita opened this issue Sep 24, 2017 · 5 comments

Comments

@bukinoshita
Copy link

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.

@dmiller9911
Copy link

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.

@ljharb
Copy link
Collaborator

ljharb commented Oct 10, 2017

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

@bukinoshita
Copy link
Author

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

@ljharb ljharb reopened this Oct 10, 2017
@dmiller9911
Copy link

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.

@ljharb
Copy link
Collaborator

ljharb commented Oct 11, 2017

Nope, please do!

dmiller9911 added a commit to dmiller9911/react-with-styles that referenced this issue Oct 12, 2017
Throw appropriate errors if a Style Interface has not been registered or an invalid Style Interface has been registered.
Throw an appropriate error if a Theme has not been registered.

Resolves: airbnb#102
dmiller9911 added a commit to dmiller9911/react-with-styles that referenced this issue Oct 12, 2017
Throw appropriate errors if a Style Interface has not been registered or an invalid Style Interface has been registered.
Throw an appropriate error if a Theme has not been registered.

Resolves: airbnb#102
dmiller9911 added a commit to dmiller9911/react-with-styles that referenced this issue Oct 15, 2017
Throw appropriate errors if a Style Interface has not been registered or an invalid Style Interface has been registered.
Throw an appropriate error if a Theme has not been registered.

Resolves: airbnb#102
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants