Context and Server Side Rendering

[codyaverett]

One of our project's GatsbyJS server side rendering seems to have some issues with finding the shape of state during build.

Example Snippet

export const SharedContainer: ComposableContainer<State, Actions, {}, Effects> = props => {
    return <Container initialState={initialState} effects={effects} actions={actions} context="myContextString" {...props} />;
};

Gatsby Build error

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  302 |             mountContainer = _ref.mountContainer;
  303 |         return createElement(InnerContainer, _extends({}, _this4.props, {
> 304 |           state: state[context],
      | ^
  305 |           setContextState: setContextState,
  306 |           mountContainer: mountContainer
  307 |         }));


  WebpackError: TypeError: Cannot read property 'myContextString' of undefined

The link in the error describes common pitfalls of SSR in gatsby.
e.g. window object is missing, either mockup window or wrap the code in a conditional so that it only runs if the object is truthy.

Running the app in dev mode does not have this issue. (Not SSR)

I'm trying to figure out how to get around this. I'd like to not have to mock out the state of the app and just use context as is, but i'm not sure if that is possible at this point.

[diegohaz]

The error seems to be on this line:

constate/src/Container.tsx

Line 168 in a548d72

state={state[context]}

That state comes directly from Provider and it's set there in the constructor:

constate/src/Provider.tsx

Line 63 in a548d72

state: initialState as State,

Have you wrapped your app with Provider?

Maybe the solution is to add state: {} here:

constate/src/Context.ts

Line 17 in a548d72

const Context = React.createContext({} as ContextState);

[codyaverett]

Modifying this line as you recommended solved our issues.

constate/src/Context.ts

Line 17 in a548d72

const Context = React.createContext({} as ContextState);

My solution was just this

const Context = React.createContext<Partial<ContextState>>({ state: {} });

What do you think @diegohaz ?

[diegohaz]

I think that's OK. Do we really need Partial there?

[codyaverett]

As I see it, it's either we have it like that as a partial, or we'd also need to define setContextState, and mountContainer in that createContext Call.

const Context = React.createContext<ContextState>({ state: {}, mountContainer: (...mountContainerParams) => void, mountContainer: { ...mountContainerProps } });

[diegohaz]

I guess we can define setContextState and mountContainer as optionals.