'Window is not defined' failed build process

[artrn-nt]

Hello. I got the 'Window is not defined' error during the build process using Netlify. I know this is a recurrent issue and I checkout a lot of documentation on how to solve this but unfortunately I was unable to figure it out. Consider I'm still in the React learning process.

For instance I checked this:
https://www.gatsbyjs.org/docs/debugging-html-builds/#how-to-check-if-window-is-defined
#309

What I try to do:

I implemented a switch button on a single webpage which enable the user to toggle between two languages. The user language preference is supposed to be stored in local storage. I thought about using a useEffect hook to solve the problem but as a beginner I'm still confused about how to use it.

Thank you by advance for you help.

Code:

Below is the code that encounter the problem during build process:

import React, { useState } from 'react';
import Switch from '@material-ui/core/Switch';
import { withStyles } from '@material-ui/core/styles';
import { useTranslation } from 'react-i18next';
import headerStyles from '../../styles/header.module.scss';

function SwitchCpt() {

    const { i18n } = useTranslation('', { useSuspense: false });

    const [state, setState] = useState({
        checked: (typeof window !== undefined ? JSON.parse(localStorage.getItem('LngSelect')) : false)
    });

    function handleTranslation(state) {
        if (state) {
            i18n.changeLanguage('fr');
        } else {
            i18n.changeLanguage('en');
        }
        if (typeof window !== undefined) {
            localStorage.setItem('LngSelect', JSON.stringify(state));
        }
    }

    const ThemeSwitch = withStyles({
        switchBase: {
            color: '#F7F7F7',
            '&$checked': {
                color: '#2B87A5',
            },
            '&$checked + $track': {
                backgroundColor: '#2B87A5',
            },
            '&$checked:hover': {
                background: 'transparent',
                backgroundColor: 'rgba(43, 135, 165, .1)',
            },
            '&:hover': {
                backgroundColor: 'rgba(153, 153, 153, .1)',
            }
        },
        checked: {},
        track: {},
    })(Switch);

    return (
        <div className={headerStyles.switchCpt}>
            <span className={headerStyles.lng}>EN</span>
            <ThemeSwitch
                checked={state.checked}
                onChange={(e) => {
                    setState({ checked: e.target.checked });
                    handleTranslation(e.target.checked);
                }}
                name="languagesSwitch"
            />
            <span className={headerStyles.lng}>FR</span>
        </div>
    )

}

export default SwitchCpt

[pvdz]

(I updated the desc to add the code in a code block, only. It was already a partial paste).

The example you pasted was cut off. Do you have a repo with a reproduction we can take a look at? In general it should be safe to do typeof window but we'd need to see what you were trying to do in order to help you further. Thanks :)

[artrn-nt]

Hello Peter. Thank you for your answer. Yes I've got a repository with the whole project (a simple and personal project) but I'm not sure I want to make it public and accessible. As I said above, the code I pasted is the one that make the build fail.

I implemented a switch button in a header which enable the user to toggle between two languages (english and french). I would like the user choice to be stored in local storage so that when the page refreshes the user choice is kept in memory. For instance if the user switches to french and refreshes the page, french will be still displayed and not english by default.

But honestly after one day of headaches about this trying many things, I'm on the point of giving up and removing this feature. Maybe it is not that relevant...

[JackZheng10]

Try putting undefined in a string like "undefined". It's what works for me!

[pvdz]

That seems like a reasonable bug to resolve. Going to close this. If that did not resolve it please reopen and report a new repro.