{"action":"created","issue":{"url":"https://api.github.com/repos/cssinjs/react-jss/issues/305","repository_url":"https://api.github.com/repos/cssinjs/react-jss","labels_url":"https://api.github.com/repos/cssinjs/react-jss/issues/305/labels{/name}","comments_url":"https://api.github.com/repos/cssinjs/react-jss/issues/305/comments","events_url":"https://api.github.com/repos/cssinjs/react-jss/issues/305/events","html_url":"https://github.com/cssinjs/react-jss/issues/305","id":373408803,"node_id":"MDU6SXNzdWUzNzM0MDg4MDM=","number":305,"title":"React 16.6.0 and new context API \"static contextType\"","user":{"login":"damianobarbati","id":2225869,"node_id":"MDQ6VXNlcjIyMjU4Njk=","avatar_url":"https://avatars2.githubusercontent.com/u/2225869?v=4","gravatar_id":"","url":"https://api.github.com/users/damianobarbati","html_url":"https://github.com/damianobarbati","followers_url":"https://api.github.com/users/damianobarbati/followers","following_url":"https://api.github.com/users/damianobarbati/following{/other_user}","gists_url":"https://api.github.com/users/damianobarbati/gists{/gist_id}","starred_url":"https://api.github.com/users/damianobarbati/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/damianobarbati/subscriptions","organizations_url":"https://api.github.com/users/damianobarbati/orgs","repos_url":"https://api.github.com/users/damianobarbati/repos","events_url":"https://api.github.com/users/damianobarbati/events{/privacy}","received_events_url":"https://api.github.com/users/damianobarbati/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-10-24T10:17:11Z","updated_at":"2018-10-24T11:28:57Z","closed_at":null,"author_association":"NONE","body":"While playing with this new feature just released: https://reactjs.org/docs/context.html#classcontexttype\r\n\r\nI got the following:\r\n\r\n```\r\nUncaught Error: [undefined] Please use ThemeProvider to be able to use WithTheme\r\n    at Object.initial (create-theme-listener.js?6a8e:13)\r\n    at new Jss (createHoc.js?ffe6:144)\r\n    at constructClassInstance (react-dom.development.js?61bb:11864)\r\n    at updateClassComponent (react-dom.development.js?61bb:13681)\r\n    at beginWork (react-dom.development.js?61bb:14489)\r\n    at performUnitOfWork (react-dom.development.js?61bb:17014)\r\n    at workLoop (react-dom.development.js?61bb:17054)\r\n    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149)\r\n    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:199)\r\n    at invokeGuardedCallback\r\n\r\nThe above error occurred in the <Jss(Text)> component:\r\n    in Jss(Text) (created by Auth)\r\n    in form (created by Form)\r\n    in Form (created by Auth)\r\n    in main (created by Auth)\r\n    in Auth (created by Jss(Auth))\r\n    in Jss(Auth) (created by Route)\r\n    in Route (created by withRouter(Jss(Auth)))\r\n    in withRouter(Jss(Auth)) (created by Route)\r\n    in Route (created by Router)\r\n    in Switch (created by Router)\r\n    in Layout (created by Jss(Layout))\r\n    in Jss(Layout) (created by Route)\r\n    in Route (created by withRouter(Jss(Layout)))\r\n    in withRouter(Jss(Layout)) (created by Router)\r\n    in Router (created by BrowserRouter)\r\n    in BrowserRouter (created by Router)\r\n    in Router\r\n    in ThemeProvider\r\n\r\n```\r\n\r\nSnippet of not working component:\r\n```\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cx from 'classnames';\r\nimport injectSheet from 'react-jss';\r\nimport ClearIcon from 'muicons/dist/CloseCircle.js';\r\n\r\nimport { context } from './Form.js';\r\n\r\n@injectSheet(theme => ({\r\n}))\r\nexport default class Text extends React.PureComponent {\r\n    static contextType = context;\r\n\r\n    static propTypes = {\r\n        classes: PropTypes.object.isRequired,\r\n        name: PropTypes.string.isRequired,\r\n    };\r\n\r\n    render = () => {\r\n        // destructuring defaultValue to not have it in otherProps\r\n        const { classes, name, value, defaultValue, ...otherProps } = this.props; //eslint-disable-line\r\n        const { values, onChange, onClear } = this.context\r\n\r\n        return (\r\n            <div className={classes.root}>\r\n                <input id={name} name={name} value={values[name] || ''} onChange={onChange(name)} type={'text'} {...otherProps} />\r\n                { !!onClear && !!value && <ClearIcon onClick={onClear(name)} />}\r\n            </div>\r\n        );\r\n    };\r\n}\r\n```\r\n\r\nSnippet of working component (without using the new API):\r\n```\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cx from 'classnames';\r\nimport injectSheet from 'react-jss';\r\n\r\nimport { context } from './Form.js';\r\n\r\nimport ClearIcon from 'muicons/dist/CloseCircle.js';\r\n\r\n@injectSheet(theme => ({\r\n}))\r\nexport default class Text extends React.PureComponent {\r\n    static propTypes = {\r\n        classes: PropTypes.object.isRequired,\r\n        name: PropTypes.string.isRequired,\r\n    };\r\n\r\n    render = () => {\r\n        // destructuring defaultValue to not have it in otherProps\r\n        const { classes, name, value, defaultValue, ...otherProps } = this.props; //eslint-disable-line\r\n\r\n        return (\r\n            <context.Consumer>\r\n                { contextValue => {\r\n                    const { values, onChange, onClear } = contextValue;\r\n\r\n                    return (\r\n                        <div className={classes.root}>\r\n                            <input id={name} name={name} value={values[name] || ''} onChange={onChange(name)} type={'text'} {...otherProps} />\r\n                            { !!onClear && !!value && <ClearIcon onClick={onClear(name)} />}\r\n                        </div>\r\n                    );\r\n                } }\r\n            </context.Consumer>\r\n        );\r\n    };\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/cssinjs/react-jss/issues/comments/432618822","html_url":"https://github.com/cssinjs/react-jss/issues/305#issuecomment-432618822","issue_url":"https://api.github.com/repos/cssinjs/react-jss/issues/305","id":432618822,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMjYxODgyMg==","user":{"login":"damianobarbati","id":2225869,"node_id":"MDQ6VXNlcjIyMjU4Njk=","avatar_url":"https://avatars2.githubusercontent.com/u/2225869?v=4","gravatar_id":"","url":"https://api.github.com/users/damianobarbati","html_url":"https://github.com/damianobarbati","followers_url":"https://api.github.com/users/damianobarbati/followers","following_url":"https://api.github.com/users/damianobarbati/following{/other_user}","gists_url":"https://api.github.com/users/damianobarbati/gists{/gist_id}","starred_url":"https://api.github.com/users/damianobarbati/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/damianobarbati/subscriptions","organizations_url":"https://api.github.com/users/damianobarbati/orgs","repos_url":"https://api.github.com/users/damianobarbati/repos","events_url":"https://api.github.com/users/damianobarbati/events{/privacy}","received_events_url":"https://api.github.com/users/damianobarbati/received_events","type":"User","site_admin":false},"created_at":"2018-10-24T11:28:57Z","updated_at":"2018-10-24T11:28:57Z","author_association":"NONE","body":"Hey @kof, yes: I'm using the new React context API, and the ThemeProvider as well.\r\n\r\n```\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\nimport { jss, ThemeProvider } from 'react-jss';\r\nimport theme from './theme';\r\n\r\nimport Router from './Router';\r\n\r\njss.createStyleSheet(theme.globals).attach();\r\n\r\nReactDOM.render(\r\n    <ThemeProvider theme={theme}>\r\n        <Router />\r\n    </ThemeProvider>\r\n, document.getElementById('app'));\r\n```\r\n\r\nFeel free to close the issue, I'll be reopening it once I manage to create a codesandbox reproducing the error.\r\nI just wanted to report this issue as soon as possible so if anyone was already working on new context API integration then he'd be aware of this behaviour as well."}}
{"actor":{"display_login":"damianobarbati"}}