React: React 16.3.1 Context API - TypeError: Cannot set property '_currentValue' of undefined

[werne2j]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Using the new Context api i am getting an error
TypeError: Cannot set property '_currentValue' of undefined

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
16.3.1

MyContext
const MyContext = React.createContext({});

Provider

<MyContext.Provider value={{ date: this.getData() }}>
    {this.props.children}
</MyContext.Provider>

Consumer

consumer = (context) => {
    if (context.data) {
      return this.props.children
    }
    return null;
  }

  render() {
    return (
      <MyContext.Consumer>
        {context => this.consumer(context)}
      </MyContext.Consumer>
    )
  }

Not sure if this is a bug with react or if i am not doing something correctly

[gaearon]

Could you please provide a full reproducing example?

[gaearon]

Also please make sure both react and react-dom are 16.3.1.

[werne2j]

I am using both react andreact-dom 16.3.1 for my Provider and Consumer but i think the problem i am seeing is that i am bundling those together with react 16.3.1 using webpack as a library. And the app that is consuming the library is not using react 16.3.1. So i am seeing some problems.

Is what i am describing not possible? I guess that would probably be more of a webpack question then a React question

[gaearon]

In general libraries shouldn't include their own copies of React (if that happens it's probably a bug).
Hard to say more without seeing an example.

[werne2j]

Ok, can probably close. Sounds like i just need to update my app to 16.3 so that it can use the context api

[tadjohnston]

I'm getting the same issue. The code I'm testing was working fine in 16.3.0. Here is a breaking code example:

import React, { PureComponent } from 'react'

const GmapContext = React.createContext('googleMap')

class Base extends PureComponent {
  constructor(props) {
    super(props)
    this.state = { map: null }
  }

  render() {
    const { map } = this.state

    return (
      <GmapContext.Provider value={{ map }}>
        <div>yay map!</div>
      </GmapContext.Provider>
    )
  }
}

export default class Gmap extends PureComponent {
  constructor(props) {
    super(props)
    this.state = { loaded: false }
  }

  componentDidMount() {
    this.scriptLoaded()
  }

  scriptLoaded() {
    this.setState({ loaded: true })
  }

  render() {
    const { loaded } = this.state

    return [
      <div key="map-loading">loading...</div>,
      loaded ? <Base key="google-map" /> : null,
    ]
  }
}


// jest test
import React from 'react'
import renderer from 'react-test-renderer'
import Gmap from '../Gmap'

describe('Gmap', () => {
  it('uses the default `div` and applies props if object', () => {
    const snap = renderer
      .create(<Gmap />)
      .toJSON()
    expect(snap).toMatchSnapshot()
  })
})

the error:

  ● Gmap › uses the default `div` and applies props if object

    TypeError: Cannot set property '_currentValue' of undefined

       6 |   it('uses the default `div` and applies props if object', () => {
       7 |     const snap = renderer
    >  8 |       .create(<Gmap />)
       9 |       .toJSON()
      10 |     expect(snap).toMatchSnapshot()
      11 |   })

Using
[email protected]
[email protected]
[email protected]
[email protected]

UPDATE: Well... I dunno, it seems to be working now. Previously, when it wasn't working I had triple checked versions and even did a fresh install of packages; everything seemed to match.

[gaearon]

I'm going to assume that if you have this, you're running a mix of different React versions.

Try deleting node_modules, triple-checking you have the right version in package.json (all versions should be 16.3.1), and that you don't have a lockfile that somehow overrides it, then npm install or yarn.

If you still have this please create and publish a reproducing project or a fiddle.

[joacub]

i have the same problem.

[gaearon]

File a new issue with a reproducing case. Thanks.