Problems with context using react-jss

[djmccormick]

I'm using mui-org/material-ui (1.0.0-beta.28) and cssinjs/react-jss (8.3.3). When I run reactTreeWalker (4.0.2) against my application, I get an error from JSS that appears to be related to context. My application is able to be rendered without issue using ReactDOMServer.renderToString. I have used reactTreeWalker against this app in the past, but after we upgraded MUI/JSS we started seeing this problem.

react-jss code that might be relevant: https://github.com/cssinjs/react-jss/blob/v8.3.3/src/JssProvider.js#L24

The error:

TypeError: Cannot read property '6fc570d6bd61383819d0f9e7407c452d' of undefined
	at JssProvider.getChildContext (/Users/username/Projects/folder-name/project-name/node_modules/react-jss/lib/JssProvider.js:65:38)
	at /Users/username/Projects/folder-name/project-name/node_modules/react-tree-walker/commonjs/index.js:167:76
	at doTraverse (/Users/username/Projects/folder-name/project-name/node_modules/react-tree-walker/commonjs/index.js:79:68)
	at doVisit (/Users/username/Projects/folder-name/project-name/node_modules/react-tree-walker/commonjs/index.js:116:9)
	at /Users/username/Projects/folder-name/project-name/node_modules/react-tree-walker/commonjs/index.js:142:9
	at new Promise (<anonymous>)
	at reactTreeWalker (/Users/username/Projects/folder-name/project-name/node_modules/react-tree-walker/commonjs/index.js:70:10)
	at router.get (/Users/username/Projects/folder-name/project-name/server/client/server-side-rendering.js:76:2)
	at Layer.handle [as handle_request] (/Users/username/Projects/folder-name/project-name/node_modules/express/lib/router/layer.js:95:5)
	at next (/Users/username/Projects/folder-name/project-name/node_modules/express/lib/router/route.js:137:13)
	at Route.dispatch (/Users/username/Projects/folder-name/project-name/node_modules/express/lib/router/route.js:112:3)
	at Layer.handle [as handle_request] (/Users/username/Projects/folder-name/project-name/node_modules/express/lib/router/layer.js:95:5)
	at /Users/username/Projects/folder-name/project-name/node_modules/express/lib/router/index.js:281:22
	at param (/Users/username/Projects/folder-name/project-name/node_modules/express/lib/router/index.js:354:14)
	at param (/Users/username/Projects/folder-name/project-name/node_modules/express/lib/router/index.js:365:14)
	at Function.process_params (/Users/username/Projects/folder-name/project-name/node_modules/express/lib/router/index.js:410:3)
	at next (/Users/username/Projects/folder-name/project-name/node_modules/express/lib/router/index.js:275:10)
	at Function.handle (/Users/username/Projects/folder-name/project-name/node_modules/express/lib/router/index.js:174:3)
	at router (/Users/username/Projects/folder-name/project-name/node_modules/express/lib/router/index.js:47:12)
	at Layer.handle [as handle_request] (/Users/username/Projects/folder-name/project-name/node_modules/express/lib/router/layer.js:95:5)
	at trim_prefix (/Users/username/Projects/folder-name/project-name/node_modules/express/lib/router/index.js:317:13)
	at /Users/username/Projects/folder-name/project-name/node_modules/express/lib/router/index.js:284:7

Thanks in advance for any help or guidance you can offer.

[kinday]

Ran into same issue with Styled Components ThemeProvider.

react-tree-walker sets React context to undefined. To work around this issue, pass empty object (or any context object of your choice) as third argument to reactTreeWalker:

import { ThemeProvider } from 'styled-components'
import reactTreeWalker from 'react-tree-walker'
import App from './app'

function visitor(element, instance) {
  // ...
}

const app = (
  <ThemeProvider>
    <App />
  </ThemeProvider>
)

const context = {}

reactTreeWalker(app, visitor, context)
  .then(() => console.log('Works like a charm!'))
  .catch(err => console.error(err))