Gatsby: Building static HTML failed when you createContext with empty default value

[codingfunwoody]

Description

It's working when gatsby develop
but failed to build when you use React.createContext with empty default value
You can solve it by assigned default value in React.createContext method. But I cannot modify other npm packages which are using React.createContext with empty default value. So I cannot build the website.
Usually I set the default value by ,
not in the createContext method

Steps to reproduce

Parent file
const AppContext = React.createContext();
...

....
....
Children file
const {isLogin} = React.useContext(AppContext);

or
git clone https://github.com/codingfunwoody/reproduceGastby.git
gatsby build

Expected result

Build successful

Actual result

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

Environment

System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
Binaries:
Yarn: 1.12.3 - C:Program Files (x86)Yarnbinyarn.CMD
npm: 6.4.1 - C:Program Filesnodejsnpm.CMD
Browsers:
Edge: 42.17134.1.0
npmPackages:
gatsby: ^2.1.18 => 2.1.18
gatsby-plugin-create-client-paths: ^2.0.4 => 2.0.4
gatsby-plugin-react-helmet: ^3.0.6 => 3.0.7
gatsby-plugin-typescript: ^2.0.7 => 2.0.9

[freiksenet]

Could you provide a bigger reproduction case with both parent and child file fully included? I can't reproduce it here.

[codingfunwoody]

Could you provide a bigger reproduction case with both parent and child file fully included? I can't reproduce it here.

Sorry for inconvenience. I uploaded my whole project to github.
You can clone my project to reproduce it. I think it can clearly be shown. Thank you for helping.
https://github.com/codingfunwoody/reproduceGastby.git

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[codingfunwoody]

it's still not resolved.

[jrhicks]

I have the same issue on my project. Everything works fine when "gatsby develop", but "gatsby build" fails.

I was able to "work around" the issue by using ||

    const { myVar } = useContext(FooContext) || { myVar: 0 }

[codingfunwoody]

yes, but it cannot be solved if you import a 3rd package, unless you modify their coding.

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[DavidChouinard]

The recommend install instruction of Auth0 triggers this bug. Came across this Github issue after days of frustrating and opaque debugging — hope this note can be helpful for others working with Auth0.

[shnibble]

I had the same issue and solved it with a simple solution after some trial and error. My site would work fine with gatsby develop but failed using gatsby build with the error: "WebpackError: TypeError: Cannot read property of undefined".

To fix it, I added a const initialState object with the default values used for the context and passed that to the createContext method like so: React.createContext(initialState). Build worked fine after that.

[kmcaloon]

@DavidChouinard could you give more details here? I'm wondering what exactly could cause this using Auth0?

[DavidChouinard]

The Auth0 installation instructions for React trigger this issue (see export const Auth0Context = React.createContext();).

It's especially painful because everything works fine in development but gatsby build fails when trying to deploy. The error message is very opaque — I don't know what I would have done had I not been able to randomly stumble on this thread.

[kmcaloon]

Ah I see. The Auth0 package actually creates an empty context. Since this might be a common pattern, should this be fixed on Gatsby's end so that it doesn't break the builds?

[DavidChouinard]

Since this might be a common pattern, should this be fixed on Gatsby's end so that it doesn't break the builds?

Definitely — or at a minimum, a less confusing error message + parity between gatsby build and gatsby develop.

[martin2844]

HI! Just passing by, wanted to say thanks to @DavidChouinard
My gatsby project was failing build. It uses global context, by doing so, in a contextProvider.js:
export const GlobalStateContext = React.createContext()

and then:

`const initialState = {
theme: "light",
themeBool: false,
lang: 'es',
section: 'on',
section2: 'on'
}

function reducer(state, action) {
switch (action.type) {
case "TOGGLE_THEME": {
return {
...state,
theme: state.theme === "light" ? "dark" : "light",
themeBool: state.theme === 'light' ? true : false
}
}`

etc...

finally :
`const GlobalContextProvider = ({ children }) => {
const [state, dispatch] = React.useReducer(reducer, initialState);

return (
{children}


)
}

export default GlobalContextProvider`

Now, this was working on gatsby develop just fine. But not on build. Your post got me thinking. The isue was with state being undefined. So I just put in an OR statement on the state load for each page,

so it went from this:
const state = useContext(GlobalStateContext),

to this:
const state = useContext(GlobalStateContext) || { theme: "light", themeBool: false, lang: 'es', section: 'on', section2: 'on' }

and it worked.

It was for a Gatsby Site which uses global context to be able to change languages and integrate a drak theme:
https://martin2844.github.io/gatsby-cv-site/

Thanks a lot!

[nolandg]

This is not fixed and the above "fixes" are painful. The whole point of React context is so you don't have to repeat that info every time you useContext down the tree.

[jonniebigodes]

I was going over this and the i see it is like so, techinically this is not a Gatsby issue per se. And i might be completely off base here. But going over the flow of the intended behaviour. A React context is created somewhere in the app without nothing inside, no variable or anything, you go about coding in development mode, which lets you get away with some things, that normally you wouldn't to avoid breaking the development experience. Now when you issue a production build this behaviour will present itself and bubble up to any other packages that will consume the code. We cannot forget that when the production build is issued Gatsby will generate the component tree/pages and so on based on what you have. If you create a context without anything inside and you want to assign/check the value of a variable down the line in the component tree, React will break, not Gatsby, Gatsby in this case is just the middle man. The way i see it the context if it's going to be used in multiple places and far down in the component tree it should be bumped up to gatsby-browser.js and gatsby-ssr.js. making it available to be used whenever/wherever. More on that here, if you're willing, make a reproduction following these steps so that it can be better looked at

[martin2844]

I was going over this and the i see it is like so, techinically this is not a Gatsby issue per se. And i might be completely off base here. But going over the flow of the intended behaviour. A React context is created somewhere in the app without nothing inside, no variable or anything, you go about coding in development mode, which lets you get away with some things, that normally you wouldn't to avoid breaking the development experience. Now when you issue a production build this behaviour will present itself and bubble up to any other packages that will consume the code. We cannot forget that when the production build is issued Gatsby will generate the component tree/pages and so on based on what you have. If you create a context without anything inside and you want to assign/check the value of a variable down the line in the component tree, React will break, not Gatsby, Gatsby in this case is just the middle man. The way i see it the context if it's going to be used in multiple places and far down in the component tree it should be bumped up to gatsby-browser.js and gatsby-ssr.js. making it available to be used whenever/wherever. More on that here, if you're willing, make a reproduction following these steps so that it can be better looked at

Look, I am by no means experienced with either Gatsby or React, I've done a few sites though.
The only (serious) App I did, is a Mern app which handles state and user Auth via useContext hook. And, lets not forget React in the end is Static. The build process with a React app and UseContext does not fail at build.

So, this is clearly a Gatsby Issue. Context is not being defined at build time per each page, so an Empty object simulating state has to be passed in order not to get an undefined. Somebody, correct me if I am wrong.