Internal React Error Warnings in Console

[tjwells85]

I am getting warnings in the console with the following:
Warning: Internal React error: Expected static flag was missing. Please notify the React team. at h (http://localhost:3000/node_modules/.vite/deps/react-open-weather.js?v=6fbd7764:909:25)

This seems to have started after upgrading to React 18. After doing some digging, this is caused when hooks are used conditionally, or an early return happens before the hooks are declared. Indeed looking in ReactWeather.js, I can see where the issue is.

const ReactWeather = ({
  unitsLabels,
  showForecast,
  lang,
  data,
  locationLabel,
  isLoading,
  errorMessage,
  theme,
}) => {
  if (data) {
    const classes = useStyles({ showForecast, theme });
    const { forecast, current } = data;
    if (isLoading) {
      return <div>Loading...</div>;
    }
    if (errorMessage) {
      return <div>{errorMessage}</div>;
    }
    return (
      <div className={classes.container}>
        <div className={classes.main}>
          <div className={classes.left}>
            <h2 className={classes.header}>{locationLabel}</h2>
            <Today
              current={current}
              unitsLabels={unitsLabels}
              lang={lang}
              theme={theme}
            />
          </div>
          <div className={classes.right}>
            <WeatherIcon
              path={current.icon}
              size={120}
              color={theme.todayIconColor}
              title={current.description}
            />
          </div>
        </div>
        {showForecast && (
          <Forecast
            unitsLabels={unitsLabels}
            forecast={forecast}
            lang={lang}
            theme={theme}
          />
        )}
      </div>
    );
  }
  return null;
};

Right here:

...
 if (data) {
    const classes = useStyles({ showForecast, theme });
    const { forecast, current } = data;
...

Should be refactored like such:

const ReactWeather = (...) => {
  const classes = useStyles({ showForecast, theme });
  if (!data) {
    return null;
  }
 ...rest
}

Everything still seems to work, though, just a bit annoying opening dev console and seeing a wall of warnings.

[aerastov]

I have the same problem (React 18):
react-dom.development.js:86 Warning: Internal React error: Expected static flag was missing. Please notify the React team.
at h (webpack://modulef1_homework/./node_modules/react-open-weather/lib/ReactWeather.js?:2:29934)

[farahat80]

Fixed in v1.2.3