Next.js: 8.1.0 Context.Consumer value is undefined

[zpnester]

Bug report

Describe the bug

In Next.js 8.1.0 React Context.Consumer receives value of undefined

Only on server side

UPDATE: Only in production, not in npm run dev

To Reproduce

Reproduce repository - link

const MyContext = React.createContext();

function Home() {

    return <MyContext.Provider value={{ x: "123" }}>
        <MyContext.Consumer>
            {value => value.x}
        </MyContext.Consumer>
    </MyContext.Provider>
}

export default Home;

Expected behavior

MyContext.Consumer value should receive object from MyContext.Provider

System information

• Version of Next.js: 8.1.0

Additional context

Also an issue for many Antd components

[oliviertassinari]

Same issue with Material-UI: https://github.com/mui-org/material-ui/issues/15505. The problems seem to be coming from: https://github.com/zeit/next.js/compare/v8.0.5-canary.10..v8.0.5-canary.11.

[nblthree]

this is what cause the problem
https://github.com/zeit/next.js/blob/f66546f9507282b1aa4df90936216e3bf544d283/packages/next/bin/next.ts#L14-L18

[nblthree]

Doing so

if(command !== 'start'){
  const React = require('react') 
  if (typeof React.Suspense === 'undefined') { 
    throw new Error(`The version of React you are using is lower than the minimum required version needed for Next.js. Please upgrade "react" and "react-dom": "npm install --save react react-dom" https://err.sh/zeit/next.js/invalid-react-version`) 
  } 
}

will solve the problem, of course it should be added after
https://github.com/zeit/next.js/blob/f66546f9507282b1aa4df90936216e3bf544d283/packages/next/bin/next.ts#L74
but I don't know if it's the right fix but it does work

PS: if(command === 'dev'){ may be better

[nblthree]

@oliviertassinari how do you do to pinpoint the version in where the problem started?

[oliviertassinari]

I guess you can try different versions with https://github.com/zpnester/next-consumer-issue?

[ThomasK33]

Same issue occurs using rbx with 8.1.0.

Downgrading to 8.0.4 helped, as the production build and serving do not throw the described error.

[michael-harley]

I'm using 9.0.3, my _app.js isn't even being rendered. (There might be a mistake in code?)

Without changing the code:

1. I tried downgrading to 8.0.3, just like the suggestion above and it worked.
2. Then out of curiosity, I tried to update next to the latest version of 9.1.1, and it worked too.

Now my _app.js is being rendered and I can use either Consumer or useContext hooks.

---

If you are wondering how to upgrade or downgrade your library, the easiest way is to remove it then install it again.

Example:

1. yarn remove next
2. yarn add [email protected] (or yarn add next for latest version)

Hope this help!