[Bug]: Page instantly closed when typed directly in browser's address bar

[hiendaovinh]

Telegram Application

Other

Describe the Bug

With the template of Typescript-tma.js-React.js, there is a bug with the navigator which closes the page instantly when opened by typing in the address bar instead of clicking on the link.
With the navigator.attach(); commented out in the App.tsx, the problem never occurred.

To Reproduce

Steps to reproduce the behavior:

1. npx @telegram-apps/create-mini-app@latest
2. Typescript-tma.js-React.js
3. Enter this in the address bar http://localhost:5173/reactjs-template
4. The page closes

Peek.2024-07-30.19-23.mp4

Expected Behavior

It behaves normally.

[incpo]

Same, it's redirects back. Maybe it's because of react hash router.

It's also a problem for telegram web, because there are the same issue.

[heyqbnk]

Yeah, I know about this issue. Will take a look this month.

I am not sure, but you could move the navigator initialization higher, maybe in the index.ts file, wait for it attach and then render the React tree. A possible reason is the navigator conflicting with the React Router. Could you try this solution?

[hiendaovinh]

Yeah, I know about this issue. Will take a look this month.

I am not sure, but you could move the navigator initialization higher, maybe in the index.ts file, wait for it attach and then render the React tree. A possible reason is the navigator conflicting with the React Router. Could you try this solution?

For now, the snippet of initiating the navigator and Router rendering is in App component. You mean moving this to the Root component right?

// Create a new application navigator and attach it to the browser history, so it could modify
// it and listen to its changes.
const navigator = useMemo(() => initNavigator("app-navigation-state"), []);
const [location, reactNavigator] = useIntegration(navigator);

// Don't forget to attach the navigator to allow it to control the BackButton state as well
// as browser history.
useEffect(() => {
	navigator.attach();
	return () => navigator.detach();
}, [navigator]);

[heyqbnk]

No, do something like this:

// index.ts
import { initNavigator } from '@telegram-apps/sdk';

const navigator = initNavigator("app-navigation-state");
await navigator.attach();

ReactDOM.createRoot(document.getElementById('root')!).render(<Root navigator={navigator} />);

Then, use the integration using passed navigator inside App.tsx. This solution is far from the perfect, but may serve as a temporary solution

[incpo]

Nah, still doesn't work for me, even with that statement. The attach method is messing up something, breaking the logic or whatever. Tried pushing some values into history state, but still has the same problem

// index.tsx
const navigator = initNavigator('app-navigation-state');
await navigator.attach();

ReactDOM.createRoot(document.getElementById('root')!).render(
  <QueryClientProvider client={queryClient}>
    {navigator.attached ? <Root navigator={navigator} /> : null}
  </QueryClientProvider>,
);

[hiendaovinh]

It doesn't work for me.

[heyqbnk]

Currently working on a new major version of the package. Will take a look and solve the problem there

[heyqbnk]

Hey! I have looked into the problem and found out what was the reason.

As long as I am using a bit different Chromium-based browser (Yandex Browser), its behavior differs a bit from Google Chrome, so I couldn't see the bug.

It seems like Google Chrome determines the initial new tab page as a complete history entry, so visiting the mini app from this tab makes history.length equal to 2. The navigator inside the mini app is rather greedy and clears the history, so it could have a complete control over it. By clearing we understand a complete history reset and make the history cursor equal to 1. Cursor with value 1 refers to the initial history item, which is a Google tab.

As a temporary solution, you could try using a different browser for development (I know, this is awful solution). I am working on solving the problem.

I am not sure, but I assume that this problem is only reproducible in development, right? I mean, you can't reproduce it deploying the app to something like GitHub Pages and opening the app inside Telegram.

[incpo]

Hey! I have looked into the problem and found out what was the reason.

As long as I am using a bit different Chromium-based browser (Yandex Browser), its behavior differs a bit from Google Chrome, so I couldn't see the bug.

It seems like Google Chrome determines the initial new tab page as a complete history entry, so visiting the mini app from this tab makes history.length equal to 2. The navigator inside the mini app is rather greedy and clears the history, so it could have a complete control over it. By clearing we understand a complete history reset and make the history cursor equal to 1. Cursor with value 1 refers to the initial history item, which is a Google tab.

As a temporary solution, you could try using a different browser for development (I know, this is awful solution). I am working on solving the problem.

I am not sure, but I assume that this problem is only reproducible in development, right? I mean, you can't reproduce it deploying the app to something like GitHub Pages and opening the app inside Telegram.

It's the same for production - try 'build & preview', same for Mozilla firefox.
Like to see that you find the problem

[GrayYoung]

popstate event not be received in iFrame on Firefox and Safari, therefore go function https://github.com/Telegram-Mini-Apps/telegram-apps/blob/bb789377bc81609583c7ee7cff105e0152cc1742/packages/sdk/src/navigation/go.ts return a promise with a false value, then go(-1) be called, finally return about:blank page.

[zakthedev]

any solution to this so far?

[heyqbnk]

Hey guys. I postponed the development of the SDK's navigation section, so it will take a bit more time to solve the problem. I would recommend temporarily removing the tapps Navigator in favor of the main library (React, Solid, etc.) own router