Versions ^2.31.0 break navigaton on initialization

[gazben]

After upgradeing to 2.31.0 I get an error: Cannot access 'To' before initialization when initializing the application.

Exception position:
../../node_modules/@microsoft/teams-js/dist/esm/packages/teams-js/src/public/pages/pages.js in at line 1:2783

I've downgraded to 2.30.0 and the error is no longer happening. Did anyone else get this error?

[Prasad-MSFT]

Hi @gazben, we are unable to repro the issue. Could you please share any repro video or repro steps to investigate further? Could you please share the error logs as well?

[noahdarveau-MSFT]

Hi @gazben, version 2.31.0 has been deprecated. Can you please upgrade to the latest version of Teams-JS (v2.33.0) and let us know if you are continuing to experience the same issue. Thanks!

[gazben]

I've tried the 2.33 version and initially that was the version version where I experienced the error. Then I started to downgrade the versions to see what is that first version that breaks and it was the 2.31.0 version. Version 2.30.0 works as expected.

I'll try to gather more information. The stack trace does not have any meaningful information.

Version 2.31.0 was the version that introduced treeshaking according to the changelog. I have guess that because this is an initialization error something is not loaded.

I'm currently using vite 5 to build my app.

[noahdarveau-MSFT]

Could you please provide us with some code or steps to reproduce the issue? I am unable to reproduce or directly determine a root cause locally. Thanks.

[gazben]

I'm currently searching for the root cause it has to be something with the tab navigations. I'll let you know as soon as I have something.

[gazben]

update: We are still investigating

[gazben]

I was able to get the full error: Uncaught (in promise) ReferenceError: can't access lexical declaration 'backStack' before initialization

It seems to me that this import is failing: https://github.com/OfficeDev/microsoft-teams-library-js/blob/main/packages/teams-js/src/public/pages/pages.ts#L29

I've now tried it with vite 5 and 6 no change. I've tried multiple teams-js versions 31,33,34-beta1 they produced the same error. Version 30 worked and because this is an import error, I would think that this is caused by the treeshaking that was introduced in version 2.31.0.

You can find the non minimized compiled file here: https://pastebin.com/ZgFV4u8j

[noahdarveau-MSFT]

Hi @gazben, thank you very much for the investigation and root cause. I think I see the issue you mentioned, in the compiled file you linked, but am still trying to determine what is ultimately causing the issue on the library end. Could you please provide some code snippets, or steps to reproduce the issue locally? It would be greatly helpful with determining possible solutions. Thanks!

[gazben]

@noahdarveau-MSFT I'll try to create a full proof of concept repo that you can use.

[gazben]

I was able to narrow the issue down. PoC is in this repository: https://github.com/gazben/teams-js-error-demo

npm install
npm run build
npm run preview

Even without the Teams app you get the same error. The error itself happens when you async import the library multiple times in the code.

There is a chance, that this is indeed a Vite a bug, but please check it out.

[noahdarveau-MSFT]

Thanks for the repro repo, it is extremely helpful! I'm still working but wanted to share a couple of interesting findings so far.

1. The issue only arises when running with vite preview, not when running through the dev server. From what I can find this is because the issue resides in the bundling that rollup (which vite uses) does.
2. The issue only occurs when dynamically importing the library, like you are doing in the repro repo. For some reason (that I am still working to determine), dynamically importing the library causes the backStack capability, which is imported by the pages which in turn is imported by app to be imported out of order. So far this is the only code in the library that I can find that experiences this issue. Importing the library statically, import { app } from '@microsoft/teams-js' as opposed to dynamically, const { app } = await import('@microsoft/teams-js') does not appear to result in this issue. I am still working to determine why this is. I appreciate your patience and assistance.

[noahdarveau-MSFT]

Hi @gazben, we're still working on getting a fix together, but in the meantime to get you unblocked, are you able to import the library statically as opposed to dynamically. I have not been able to repro the issue using static imports, so it may be a good option to resolve your issue while we continue working on this issue.

[gazben]

We are not in a hurry, with the upgrade. As I see a lot of users are still using the older versions: https://www.npmjs.com/package/@microsoft/teams-js?activeTab=versions

Currently we have it set to the last working version. If this problem really becomes an issue I see that the problem only happens if multiple imports are present. To resolve this, I can refactor our code to use only one async import.