Context API not working in production

[klementtan]

Hi! React Context works perfectly on my application on development environment with Webpacker but when I precompile my assets to serve my application in production environment it throw me TypeError: undefined is not an object (evaluating 'n.context.user.username') error. I tried implementing all the suggested solutions but it still didn't work. I upgrade the versions: to "react": "^16.7.0", "react-dom": "^16.6.0" and defining the Context creation in a separate file. The app will work fine if we use <UserContext.Consumer/> but want to stick to try our best to stick to the contextType method. Would appreciate any help. Thank you.

Link to code example:

Context Creation
https://github.com/VantageSG/Vantage/blob/master/app/javascript/contexts/UserContext.jsx

Context Provider
https://github.com/VantageSG/Vantage/blob/master/app/javascript/components/App.jsx

Context Consumer
https://github.com/VantageSG/Vantage/blob/master/app/javascript/components/navBar/desktopNavBar.jsx

React version: 16.6

The current behavior

TypeError: undefined is not an object (evaluating 'n.context.user.username') error

The expected behavior

Context API working properly.

[sophiebits]

At a glance your code looks correct. Try upgrading react and react-dom to the same version. I'm not sure but since it sounds like you are using different versions, it's possible that's related.

In addition, newer versions of React have warnings related to misusing contextType that may be helpful if you are hitting one of those cases.

I'm going to close this, as it likely isn't a bug in React. If you think that there is an issue with React, could you please go ahead and post a minimal repro case so that we can look into it?