Error while starting app - Cannot read properties of null (reading 'removeChild') at StackManager.transitionPage

Hi,

I’m started getting the next error on app open while developing (have it after build/sign too)


Screenshot 2021-09-08 at 9.53.04

I think this is something with the Routes and I think I’m not doing something as it must be

The app basically is something like crypto wallet with digital identity but not for crypto it is for our company.
I have few more problems but they are different topic. :smiley:

index.tsx

import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";

import { AuthProvider } from "./contexts";
import App from "./App";
import "./i18n";

ReactDOM.render(
  <React.StrictMode>
    <Suspense fallback={<p>Loading...</p>}>
      <Router>
        <AuthProvider>
          <App />
        </AuthProvider>
      </Router>
    </Suspense>
  </React.StrictMode>,
  document.getElementById("root"),
);

App.tsx

import { initChain } from "src/chain";
import { useAuth } from "src/contexts";
import { useBiometric } from "src/hooks";

import AppUrlListener from "src/components/AppUrlListener";
import NotificationsListener from "src/components/NotificationsListener";

import SecuritySettingsPage from "src/pages/SecuritySettings";
import SettingsPage from "src/pages/Settings";
import ScannerPage from "src/pages/Scanner";
import ProfilePage from "src/pages/Profile";
import BackupPage from "src/pages/Backup";
import ActionPage from "src/pages/Action";
import IntroPage from "src/pages/Intro";
import AboutPage from "src/pages/About";

import "src/vendor";

const App: React.FC = () => {
  const { t } = useTranslation();
  const { hasIdentity, identity } = useAuth();
  const { checkBiometric } = useBiometric();

  useEffect(() => {
    if (!hasIdentity) return;

    initChain();
    checkBiometric();
  }, [checkBiometric, hasIdentity]);

  return (
    <IonApp>
      <IonReactRouter>
        {!hasIdentity ? (
          <IonRouterOutlet id="base">
            <Route exact path="/intro" render={() => <IntroPage />} />
            <Route exact render={() => <Redirect from="/" to="/intro" />} />
          </IonRouterOutlet>
        ) : (
          <>
            <AppUrlListener />
            <NotificationsListener />

            <IonTabs>
              <IonRouterOutlet id="main">
                <Route exact path="/action" component={ActionPage} />
                <Route exact path="/profile" component={ProfilePage} />
                <Route exact path="/scanner" component={ScannerPage} />
                <Route exact path="/settings" component={SettingsPage} />
                <Route
                  exact
                  path="/settings/security"
                  component={SecuritySettingsPage}
                />
                <Route exact path="/settings/about" component={AboutPage} />
                <Route exact path="/settings/backup" component={BackupPage} />

                <Route
                  exact
                  render={() => <Redirect push from="/" to="/profile" />}
                />
              </IonRouterOutlet>

              <IonTabBar slot="bottom" color="primary">
                <IonTabButton layout="icon-top" tab="profile" href="/profile">
                  <IonIcon icon={personCircleOutline} />
                  <IonLabel>{t("Profile")}</IonLabel>
                </IonTabButton>

                <IonTabButton layout="icon-top" tab="scanner" href="/scanner">
                  <IonIcon icon={scanOutline} />
                  <IonLabel>{t("Scan")}</IonLabel>
                </IonTabButton>
                <IonTabButton layout="icon-top" tab="settings" href="/settings">
                  <IonIcon icon={settingsOutline} />
                  <IonLabel>{t("Settings")}</IonLabel>
                  {!identity?.hasBackup && (
                    <IonBadge color="danger">
                      <IonIcon icon={alertOutline} />
                    </IonBadge>
                  )}
                </IonTabButton>
              </IonTabBar>
            </IonTabs>
          </>
        )}
      </IonReactRouter>
    </IonApp>
  );
};
{
  "dependencies": {
    "@capacitor/android": "3.2.2",
    "@capacitor/app": "1.0.3",
    "@capacitor/core": "3.2.2",
    "@capacitor/haptics": "1.0.3",
    "@capacitor/ios": "^3.2.2",
    "@capacitor/keyboard": "1.0.3",
    "@capacitor/network": "^1.0.3",
    "@capacitor/push-notifications": "^1.0.4",
    "@capacitor/status-bar": "1.0.3",
    "@ionic-native/fingerprint-aio": "^5.36.0",
    "@ionic-native/native-storage": "^5.36.0",
    "@ionic-native/qr-scanner": "^5.36.0",
    "@ionic-native/social-sharing": "^5.36.0",
    "@ionic/react": "^5.7.0",
    "@ionic/react-router": "^5.7.0",
    "@ionic/storage": "^3.0.6",
    "aes256": "^1.1.0",
    "cordova-plugin-fingerprint-aio": "^4.0.2",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-qrscanner": "^3.0.1",
    "cordova-plugin-x-socialsharing": "^6.0.3",
    "es6-promise-plugin": "^4.2.2",
    "i18next": "^20.4.0",
    "i18next-resources-to-backend": "^1.0.0",
    "ionicons": "^5.4.0",
    "jetifier": "^2.0.0",
    "node-sass": "^6.0.1",
    "react": "^17.0.1",
    "react-circular-progressbar": "^2.0.4",
    "react-dom": "^17.0.1",
    "react-hook-form": "^7.15.0",
    "react-i18next": "^11.11.4",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "recheck-clientjs-library": "^1.0.23-beta.1",
    "swiper": "^6.8.4"
  },
  "devDependencies": {
    "@capacitor/cli": "3.1.2",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.6.3",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.19.15",
    "@types/react": "^16.14.3",
    "@types/react-dom": "^16.9.10",
    "@types/react-router": "^5.1.11",
    "@types/react-router-dom": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.29.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jest": "^24.4.0",
    "eslint-plugin-json": "^3.0.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.3.2",
    "prettier-eslint": "^13.0.0",
    "typescript": "^4.1.3"
  }
}
Ionic:

   Ionic CLI       : 6.17.0 (/Users/byurhanbeyzat/.nvm/versions/node/v16.3.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.7.0

Capacitor:

   Capacitor CLI      : 3.1.2
   @capacitor/android : 3.2.2
   @capacitor/core    : 3.2.2
   @capacitor/ios     : 3.2.2

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.4.1) : 1.4.0

System:

   NodeJS : v16.3.0 (/Users/byurhanbeyzat/.nvm/versions/node/v16.3.0/bin/node)
   npm    : 7.21.1
   OS     : macOS Big Sur

Thanks in advance! :slight_smile:

why are you using Router and IonReactRouter?

I don’t know why exactly I’ve had problem during development and I used different solutions what I found.
I think there is something wrong because it sometimes starts flickering on page change, I looked for this problem there was an issue on github it solved it partially now it appears sometimes and sometimes working normally

What I’m doing wrong?

Here is the repo of my app - https://github.com/byurhanbeyzat/ionic-react-tabs-test