"Initialization Failed. No Parent window found." in desktop app

[mfsysadmin]

I have the following code from Microsoft Learn:

microsoftTeams.app.initialize().then(() => {
	getClientSideToken()
	.then((token) => {
		console.log(token);
	})
	.catch((error) => {
		console.log(error);
}).catch((error) => {
	console.log(error);
});
function getClientSideToken() {
	return new Promise((resolve, reject) => {
		microsoftTeams.authentication.getAuthToken().then((result) => {
			resolve(result);
		}).catch((error) => {
			reject("Error getting token: " + error);
		});
	});
}

Unfortunately on windows desktop app I get the following error: Error: Initialization Failed. No Parent window found.

Also in web app I have this error: Error: SDK initialization timed out.

[KangxuanYe]

Hi @mfsysadmin, thank you for reaching with the piece of code regarding of initialization on your app. Could you please follow the documentation in our wiki to turn on client logging and then share ALL of logs here so that we can have more detail to investigate what is exactly going on with your app and provide guidance for you?

Also, could you please elaborate more on which host platform (i.e. Teams web, Teams desktop) you are trying to make your app run on and what version of Teams-JS library you are using?

[mfsysadmin]

Hi @KangxuanYe, in the webapp I have the following log messages:

teamsJs:app teamsjs is being used from https://cdn.jsdelivr.net/npm/@microsoft/[email protected]/dist/MicrosoftTeams.min.js. Today, teamsjs can only be used from a single script or you may see undefined behavior. This log line is used to help detect cases where teamsjs is loaded multiple times -- it is always written. The presence of the log itself does not indicate a multi-load situation, but multiples of these log lines will. If you would like to use teamjs from more than one script at the same time, please open an issue at https://github.com/OfficeDev/microsoft-teams-library-js/issues +0ms
teamsJs:communication:sendMessageToParentHelper Message 0 information: Object { actionName: "initialize", args: (3) […] } +0ms
Sending message 0 to parent via postMessage +0ms [common.js:113:9](webpack://microsoftTeams/node_modules/.pnpm/[email protected]/node_modules/debug/src/common.js)
teamsJs:validateOrigin isValidOriginsFromCDN call failed to validate origin: *.www.office.com +0ms
teamsJs:validateOrigin validOrigins fetch call to CDN failed with error: Error: Valid Origins List Is Invalid. Defaulting to fallback list +1ms

I use teams.microsoft.com, I don't know why it tries *.www.office.com
Also I don't really understand the last message since it makes a request to https://res.cdn.office.net/teams-js/validDomains/json/validDomains.json

On Teams web I have the "Error: SDK initialization timed out." message, while in the desktop app I have "Error: Initialization Failed. No Parent window found.".

[JE-Development]

Hello, I also have this issue. It suddenly appeared with no code changed. (Windows Desktop Version)
I am using Teams Tab App. There I pasted my URL of my Vue.js project.
app.ts:56 Uncaught (in promise) Error: SDK initialization timed out. at un (app.ts:56:7) at e3.initialize (app.ts:774:12) at Proxy.created (SelectPage.vue:59:24) at callWithErrorHandling (runtime-core.esm-bundler.js:199:33) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:206:17) at callHook (runtime-core.esm-bundler.js:3498:3) at applyOptions (runtime-core.esm-bundler.js:3416:5) at finishComponentSetup (runtime-core.esm-bundler.js:7878:7) at setupStatefulComponent (runtime-core.esm-bundler.js:7801:5) at setupComponent (runtime-core.esm-bundler.js:7729:36)

[KangxuanYe]

Hello, I also have this issue. It suddenly appeared with no code changed. (Windows Desktop Version) I am using Teams Tab App. There I pasted my URL of my Vue.js project. app.ts:56 Uncaught (in promise) Error: SDK initialization timed out. at un (app.ts:56:7) at e3.initialize (app.ts:774:12) at Proxy.created (SelectPage.vue:59:24) at callWithErrorHandling (runtime-core.esm-bundler.js:199:33) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:206:17) at callHook (runtime-core.esm-bundler.js:3498:3) at applyOptions (runtime-core.esm-bundler.js:3416:5) at finishComponentSetup (runtime-core.esm-bundler.js:7878:7) at setupStatefulComponent (runtime-core.esm-bundler.js:7801:5) at setupComponent (runtime-core.esm-bundler.js:7729:36)

Hi @JE-Development , could you please create another ticket for us and then following the step that I mentioned above to send logs to us in the new ticket you created? In this way, your thread will not be messed up and we can help you better. Thanks.

[jadahiya-MSFT]

Hi @mfsysadmin I'll be looking into this error for you, a few questions I have is that you mentioned that you are using teams.microsoft.com, is it correct for me to assume that you are trying to run your application in the Teams Web App environment?

Another question I have is how are you currently importing the TeamsJS library and if you downgraded your version from 2.28.0 to 2.26.0 do you see the same behavior?

Now to answer your question about why you are seeing the validOrigins fetch call failure. It appears that *.www.office.com is causing an issue in your environment leading to the CDN failure you are seeing. I am investigating why this is the case since *.www.office.com is in that CDN list that you've retrieved. That being said, it looks like it should still be defaulting back to a local list where teams.microsoft.com is being validated. Is there anymore to the logs or does it end at the validOrigins failure?

[mfsysadmin]

HI @jadahiya-MSFT

is it correct for me to assume that you are trying to run your application in the Teams Web App environment?

I use both web and desktop application but in the webapp I do not have debugger.

if you downgraded your version from 2.28.0 to 2.26.0 do you see the same behavior?

Yes the errors are the same

Is there anymore to the logs or does it end at the validOrigins failure?

No, that one is the last message.

[jadahiya-MSFT]

@mfsysadmin I think we are getting closer to finding one of the issues on our end.

I just have two follow up questions.

What browser are you currently using when testing? Do you see the exact same error logs when using a different browser by any chance.

I'm still interested to know how you are importing the TeamsJS library in the first place. I noticed that in the logs there is a CDN call to "https://cdn.jsdelivr.net/npm/@microsoft/[email protected]/dist/MicrosoftTeams.min.js" instead of our recommended endpoint of "https://res.cdn.office.net/teams-js/2.28.0/js/MicrosoftTeams.min.js" this stands out to me and is why I wanted to double check how you are importing our library.

[mfsysadmin]

@jadahiya-MSFT I'm currently using Firefox, haven't tried chrome yet.
I'm using CDN but I had the same issue with your endpoint as well. I tried CDN because I wanted to check if it works that way. I'm using the library as <script src="...">.

Also as I mentioned I have problems with the desktop application as well not only in browser.
On Android it also says SDK initialization timed out.

[jadahiya-MSFT]

@mfsysadmin

Thanks for your continued assistance!

Currently we have an issue with Firefox and one of the logs (the one about *.office.com) appears to be that same issue. I'm working on a fix now, as for the other SDK initialization errors you are seeing I don't believe they are related to this issue particular issue and we will most likely need some more logs, would you be able to run the log step that @KangxuanYe suggested in a Chromium based browser like Edge, Chrome, or Arc depending on your preference.

In the meantime I will put out a fix for the Firefox issue you are running into to unblock your testing on Firefox.

[mfsysadmin]

@jadahiya-MSFT

I checked the issue on Chrome, I still get the error: Error: SDK initialization timed out.

teamsJs:app
teamsjs is being used from https://cdn.jsdelivr.net/npm/@microsoft/[email protected]/dist/MicrosoftTeams.min.js. Today, teamsjs can only be used from a single script or you may see undefined behavior. This log line is used to help detect cases where teamsjs is loaded multiple times -- it is always written. The presence of the log itself does not indicate a multi-load situation, but multiples of these log lines will. If you would like to use teamjs from more than one script at the same time, please open an issue at https://github.com/OfficeDev/microsoft-teams-library-js/issues
+0ms

teamsJs:communication:sendMessageToParentHelper
Message 7768 information: {actionName: 'initialize', args: Array(3)}
+0ms

teamsJs:communication:sendRequestToTargetWindowHelper
Sending message 7768 to parent via postMessage
+0ms

This is all I got.

Is there any way to debug the logs on the desktop app?

[KangxuanYe]

@mfsysadmin, thank you so much for sharing the client logging for us. This is super helpful and we think your app has sent out the initialize SDK request but for some reasons, Web Host SDK doesn't send response back. There could be multiple reasons so we would like to know how do you load your app in Teams? Could you please share your app definition or manifest for us? The answers for those questions will help us to narrow down the possibilities.

As for debug Teams, I came back from Teams team and the answer would be it depends. If you are on that ring, you can right click your little Teams icon in right bottom of your desktop (I am assuming you are using Windows machine), and select Open Dev Tools from Engineering Tools. Here is a screenshot for you to reference but you may not have capability to do so.

[mfsysadmin]

@KangxuanYe I don't have any manifest etc. I have a simple web url which needs authentication with the team members.

The Engineering Tools option is not in the context menu for me.