Frontend dependency issues - creates a blank page

[cyarmer]

We are having a few issues with the frontend dependencies. We have been trying to keep up with vulnerabilities with packages and update as needed. We are stuck on an old version right now which is limiting us. I have seen on azure about bumping the dompurify, azure/msal-browser and vite due to issues. Trying to keep up with all this.

The issue we are seeing is we can build the frontend with no issues but it is blank page. We have gone through all the packages and versions trying to find what might be causing it. Below I have the terminal output from a working version. The 8 in the second group are the ones that do not show up for the blank page. Anyone possible know what package could cause this or possible how to resolve it.

[2025-02-19 15:22:31 -0600] [551111] [INFO] 127.0.0.1:60366 GET / 1.1 200 743 2410
[2025-02-19 15:22:31 -0600] [551111] [INFO] 127.0.0.1:60366 GET / 1.1 - - 2764
[2025-02-19 15:22:31 -0600] [551111] [INFO] 127.0.0.1:60366 GET /assets/index-e5bbb2b0.js 1.1 200 359432 18989
[2025-02-19 15:22:31 -0600] [551111] [INFO] 127.0.0.1:60366 GET /assets/index-e5bbb2b0.js 1.1 - - 19320
[2025-02-19 15:22:31 -0600] [551111] [INFO] 127.0.0.1:60378 GET /assets/vendor-1c30911e.js 1.1 200 1817273 55133
[2025-02-19 15:22:31 -0600] [551111] [INFO] 127.0.0.1:60378 GET /assets/vendor-1c30911e.js 1.1 - - 55422
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60382 GET /assets/fluentui-icons-24e83cba.js 1.1 200 5669 2015
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60382 GET /assets/fluentui-icons-24e83cba.js 1.1 - - 2336
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60398 GET /assets/index-83f5e191.css 1.1 200 16109 2104
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60398 GET /assets/index-83f5e191.css 1.1 - - 2432
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /assets/fluentui-react-a4d9aecc.js 1.1 200 387279 11011
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /assets/fluentui-react-a4d9aecc.js 1.1 - - 11284
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60398 GET /favicon.ico 1.1 200 4286 1716
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60398 GET /favicon.ico 1.1 - - 1964

blank page is missing these
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /auth_setup 1.1 200 492 1103
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /auth_setup 1.1 - - 1393
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /.auth/me 1.1 404 207 636
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /.auth/me 1.1 - - 956
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /containerpath 1.1 200 36 830
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /containerpath 1.1 - - 1099
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /config 1.1 200 27 885
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /config 1.1 - - 1166

[pamelafox]

.auth/me is expected to be a 404 if your app is not using user authentication

The other ones, /containerpath and /config are 200 in your output

Are there any JS errors in the console?

Are you using auth?

[cyarmer]

There are no js errors. We are not using user authentication. When we rebuild the frontend with updated package there are no errors or anything that shows anything, the page is just blank the only thing that is different is the lines below don't show up in the terminal. So, something is not letting the auth_setup go through maybe? We have tried lots of package scenarios, but nothing works yet.

[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /auth_setup 1.1 200 492 1103
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /auth_setup 1.1 - - 1393
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /.auth/me 1.1 404 207 636
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /.auth/me 1.1 - - 956
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /containerpath 1.1 200 36 830
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /containerpath 1.1 - - 1099
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /config 1.1 200 27 885
[2025-02-19 15:22:32 -0600] [551111] [INFO] 127.0.0.1:60402 GET /config 1.1 - - 1166

[pamelafox]

Ah I see, you're saying that the /auth_setup route is never called at all. That's called from this JS:

azure-search-openai-demo/app/frontend/src/authConfig.ts

Line 64 in 31ea846

const authSetup = await fetchAuthSetup();

So that'd imply that there's something wrong with the JS in that it's never executing that line.

Could you check the compiled index JS file to see if it looks off?
You could try comparing the compiled JS before and after package updates.
I'm afraid that it can be tricky to debug compiled JS issues.

[cyarmer]

We have been trying to figure it out for awhile, tricky is an understatement :) . For the compiled js they look pretty much the same except the one with the issue has
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OneShot-6LSLn0Jr.js","assets/vendor-wC8UPwQY.js","assets/fluentui-react-C6P_ZJPO.js","assets/fluentui-icons-Bm5uJh8k.js","assets/OneShot-BP5ZrY-q.css","assets/NoPage-CosVNVsS.js"])))=>i.map(i=>d[i]);

as the first entry and the one that works does not have it. Which could just be a newer version format change.

I just went through and updated some of the files like authconfig to the newest version on the repo - ended up doing a handful of others with the changes hoping that would resolve it but it is still the blank page.

[cforce]

This is very likely corelated with #2373

[cforce]

[cforce]

t is likely React: Based on the usage of createContext and the typical patterns in web app builds, it's highly probable that t is an alias (renamed variable) for the React library within the bundled code.
I assume it is a Missing or Incorrect React Import: The root cause of t being undefined is that, despite the vendor-tyjrhANx.js file being loaded, the actual React library or its createContext method is not being made available to the module where this code snippet exists. This suggests that either:
React isn't in vendor-tyjrhANx.js: vendor-tyjrhANx.js might not contain the full React library, or it might not be exporting it in a way that's consumable by this component.
The bundler might not be properly configuring the dependency for React or you might have a configuration that is preventing the export to be used correctly.
Importing with the wrong name even if react is in the file, it might not have been named to be called with t.

This likely is a co accident with #2374
I was not able to resolve the audit finding there, but it has stgh todo with react in the wider scope as well.

I already did
"npm cache clean --force"
"npm run build"
which does not solve the issue.
Maybe we shall fast foward upgrade to vite 6.x and python 12.