Skip to content
This repository has been archived by the owner on Aug 1, 2018. It is now read-only.

[bug] Support <Context.Provider /> + <Context.Consumer /> components #88

Closed
koulmomo opened this issue Apr 9, 2018 · 0 comments · Fixed by #90
Closed

[bug] Support <Context.Provider /> + <Context.Consumer /> components #88

koulmomo opened this issue Apr 9, 2018 · 0 comments · Fixed by #90

Comments

@koulmomo
Copy link
Contributor

koulmomo commented Apr 9, 2018

Type of issue

Both a feature and a bug. Bug because any apps trying to render using the new context api are broken.

Description

If your react tree contains <Provider /> or <Consumer /> components created using the new React v16.3.0 createContext API

const {Provider, Consumer} = React.createContext(false);

<Provider value={this.state.foo} />

<Consumer>
  {isFoo => {
    return isFoo ? <Foo /> : <Bar />
  }}
</Consumer>

Current behavior

Type error with message:

fatal: type is not a function stack=TypeError: type is not a function
    at prepareElement (FUSION_APP_DIR/node_modules/fusion-react-async/src/prepare.js:64:28)
    at _prepare (FUSION_APP_DIR/node_modules/fusion-react-async/src/split.js:12:7)
    at Promise.all.React__default.Children.toArray.map.child (FUSION_APP_DIR/node_modules/fusion-react-async/src/split.js:14:1)
    at Array.map (<anonymous>)
    at prepareElement.then (FUSION_APP_DIR/node_modules/fusion-react-async/src/split.js:15:42)
    at <anonymous>
    at process._tickDomainCallback (internal/process/next_tick.js:228:7), message=type is not a function, captureType=request

Expected behavior

It should be able to handle react tree that contains <Provider /> + <Consumer /> component from the new React.createContext() api.

Preliminary investigation shows that we can detect if the type of an element is a context-consumer|provider type (or even Fragment type) using the react-is package.

koulmomo added a commit to koulmomo/fusion-react-async that referenced this issue Apr 10, 2018
resolves fusionjs#88

Use the [`react-is`](https://github.com/facebook/react/blob/76b4ba01290f446f4313adf3846954412c6051b8/packages/react-is/src/ReactIs.js#L71) package to detect `<Fragment />` + `<Context.Provider />` + `<Context.Consumer />`.

bump the `devDependencies` on `react` + `react-dom` to `16.3.0` since that is when `React.createContext()` was released.
koulmomo added a commit to koulmomo/fusion-react-async that referenced this issue Apr 10, 2018
resolves fusionjs#88

Use the [`react-is`](https://github.com/facebook/react/blob/76b4ba01290f446f4313adf3846954412c6051b8/packages/react-is/src/ReactIs.js#L71) package to detect `<Fragment />` + `<Context.Provider />` + `<Context.Consumer />`.

bump the `devDependencies` on `react` + `react-dom` to `16.3.0` since that is when `React.createContext()` was released.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant