Why is my reactjs project recompiling without stop?

Question

My problem is that the console message shown in the image is printed non-stop.

When the application starts there are no messages. However, when I save some changes it starts showing console messages.

I have found the component that has a problem (If I do not use it, the problem does not occur), but I can't find any problem.

This is the parent of the component that is giving the problem (props are commented to simplify the component to a minimum):

<MainInitialPage
    /*categories={categories}
    handleCategorySelect={this.handleCategorySelect}
    onInit={this.onInit}
    userData={userData}*/
/>

This is the component that has the problem (just like the parent component, the code is commented to simplify it to the limit):

import React /*, { useContext, useEffect, useState }*/ from 'react';
/*import Category from '../../../../../shared/domain/category/category.model';
import SayCasesEnum from '../../../../../shared/domain/screen-speech-enablement/say-cases-enum';
import { AlvicButton } from '../..';
import { ButtonPreset } from '../../alvic-button/button-presets';
import CategorySelect from '../../categorySelect/categorySelect';
import { ConfigurationContext } from '../../../contexts/configuration/configuration.context';
import { translate } from '../../../utils/translate';
import { MainTitle } from '../mainTitle/mainTitle';
import { MainInitialPageProps } from './types';
import { take } from 'rxjs';
import EmptyObserver from '../../../utils/empty-observer';
import { withSay } from '../../hoc/withConfigPurchaseSay';
import { withLanguageState } from '../../hoc';*/

const MainInitialPage: React.FC /*<MainInitialPageProps> = (props)*/ = () => {
  /*const t = translate();
  const { categories, handleCategorySelect, onInit, userData, say$, language } =
    props;
  // State to know when "Welcome" message has to be played
  const [languageState, setLanguageState] = useState<string>('');
  const configuration = useContext(ConfigurationContext);

  //Only update languageState when language is deferent from the previous one
  /*useEffect(() => {
    if (languageState !== language.name) setLanguageState(language.name);
  }, [language]);

  useEffect(() => {
    say$(
      userData?.userName
        ? SayCasesEnum.CancelOperationVerification
        : SayCasesEnum.Main
    )
      .pipe(take(1))
      .subscribe(EmptyObserver);
  }, [userData?.userName, languageState]);*/

  /*const isCategorySelectionAvailable = (
    isCategorySelectionEnabled: boolean = false,
    selectProductBeforePump: boolean = false,
    categories: Category[]
  ): boolean => {
    const availableCategories = categories.filter(
      (category) => category.available === true
    );
    if (
      availableCategories.length > 1 &&
      isCategorySelectionEnabled &&
      selectProductBeforePump
    )
      return true;
    return false;
  };

  const getTitleText = (): string => {
    if (
      userData?.userName &&
      !configuration?.configuration?.ux.showUserNameInWelcomeMessage
    )
      return t('main_title_logged_in_without_username');
    if (userData?.userName)
      return t('main_title_logged_in_with_username')
        .toString()
        .replace('%USERNAME%', String(userData?.userName));
    return t('main_title').toString();
  };*/

  return (
    <div className="main-body-center-container">
      ab
      {/*<MainTitle
        title={getTitleText()}
        subtitle={t('main_subtitle').toString()}
        showSubtitle={isCategorySelectionAvailable(
          configuration?.configuration?.ux.categorySelection,
          configuration?.configuration?.ux.selectProductBeforePump,
          categories
        )}
      />
      <div className="main-categories-selection">
        {isCategorySelectionAvailable(
          configuration?.configuration?.ux.categorySelection,
          configuration?.configuration?.ux.selectProductBeforePump,
          categories
        ) ? (
          <CategorySelect
            categories={categories}
            onClickHandler={handleCategorySelect}
            screenLog="Main"
          />
        ) : (
          <AlvicButton
            id="main-start-button"
            preset={ButtonPreset.Information}
            onClick={() => onInit(configuration?.configuration)}
          >
            <span className="emphasis-3">
              {t('landing_start_button').toString()}
            </span>
          </AlvicButton>
        )}
        </div>*/}
    </div>
  );
};

export default /*withSay(withLanguageState(*/ MainInitialPage; /*));*/

I don't know if this problem can be related with this, but I am using Electron.

I have tried to comment out all the component code that is not necessary to render it.

Answer 1

I have finally found it! The problem was the file name.

In the parent component the import was: import MainInitialPage from '../../components/main/mainBody/mainInitialPage'; while the file name was MainInitialPage.ts