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.

[cyarmer]

I would say they are related and the same issue.. I get the same console error. I have not changed any of the frontend and mine is not t. but i know the dependency issue is with react and something in there. I have tried vite 6 and i get the same results. I know something is a little off in how they get built - our current working load the package-lock file is about 10K rows compared to the one with this issue is only 5k rows, so i know something is not loading all the way or not at all.

I have not tried python 12 though since i knew it is something on the react side but maybe it is how they all work together. At this point anything is worth trying.

import * as React from 'react';
const IconDirectionContext = React.createContext(undefined); ---- IconDirectionContext.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'createContext')
at IconDirectionContext.js:2:49

const IconDirectionContextDefaultValue = {};
export const IconDirectionContextProvider = IconDirectionContext.Provider;
export const useIconContext = () => React.useContext(IconDirectionContext) ? React.useContext(IconDirectionContext) : IconDirectionContextDefaultValue;

[cforce]

duplicate #2373

@pamelafox at least 3 independent reports for the same issue

• @aneesha-yit
• @cyarmer
• @cforce

below a cleand up console out

npm install

up to date, audited 389 packages in 2s

2 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

npm run build

> [email protected] build
> tsc && vite build

vite v5.4.14 building for production...
transforming (178) node_modules/@fluentui/react/lib/components/Check/index.js
../assets/background.jpg referenced in ../assets/background.jpg didn't resolve at build time, it will remain unchanged to be resolved at runtime
✓ 4729 modules transformed.
../backend/static/index.html                                   0.98 kB │ gzip:   0.44 kB
../backend/static/assets/search-openai-demo-B6klWLCp.svg                   4.21 kB │ gzip:   2.05 kB
../backend/static/assets/mua-D2w7foH7.png                     32.69 kB
../backend/static/assets/background-D1NEEJ_-.jpg    467.61 kB
../backend/static/assets/Ask-CqUcX1uG.css                      1.27 kB │ gzip:   0.49 kB
../backend/static/assets/Library-V6hu9a-N.css                  2.84 kB │ gzip:   1.07 kB
../backend/static/assets/index-B6YJf-do.css                   13.53 kB │ gzip:   3.69 kB
../backend/static/assets/NoPage-rBCr2bSV.js                    0.26 kB │ gzip:   0.22 kB │ map:     0.36 kB
../backend/static/assets/Library.module-BGjvQi5K.js            0.30 kB │ gzip:   0.22 kB │ map:     0.11 kB
../backend/static/assets/MarkdownViewer-C6PDeKL8.js            0.98 kB │ gzip:   0.57 kB │ map:     3.72 kB
../backend/static/assets/Library-BHOG7f8I.js                   1.94 kB │ gzip:   1.01 kB │ map:     7.74 kB
../backend/static/assets/Ask-CR2jCQE9.js                       5.97 kB │ gzip:   2.40 kB │ map:    25.99 kB
../backend/static/assets/fluentui-icons-7bU8QGpY.js            6.81 kB │ gzip:   2.98 kB │ map: 6,642.60 kB
../backend/static/assets/index-DBB953NT.js                   119.93 kB │ gzip:  40.47 kB │ map:   230.29 kB
../backend/static/assets/fluentui-react-CQgpO_lM.js          327.93 kB │ gzip:  92.93 kB │ map: 1,475.71 kB
../backend/static/assets/vendor-tyjrhANx.js                1,390.36 kB │ gzip: 431.56 kB │ map: 5,923.78 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 2m 16s

Starting backend

/search-openai-demo/.venv/bin/python
AADSTS50173: The provided grant has expired due to it being revoked, a fresh auth token is needed. The user might have changed or reset their password. The grant was issued on '2025-01-20T07:58:00.9413276Z' and the TokensValidFrom date (before which tokens are not valid) for this user is '2025-02-19T10:25:15.0000000Z'. Trace ID: [REDACTED] Correlation ID: [REDACTED] Timestamp: 2025-02-25 06:34:37Z
Interactive authentication is needed. Please run:
az login --scope https://management.core.windows.net//.default
INFO:root:APP_LOG_LEVEL is set to: DEBUG
INFO:root:Current log level: 10
INFO:root:This is an info message before ALLOWED_ORIGIN check
WARNING:root:This is a warning message
INFO:root:Current log level: 10
INFO:app:CORS enabled for ['https://search-openai-demo.example.net']
DEBUG:asyncio:Using selector: EpollSelector
 * Serving Quart app 'app'
 * Debug mode: False
 * Please use an ASGI server (e.g. Hypercorn) directly in production
 * Running on http://localhost:50505 (CTRL + C to quit)
INFO:app:Setting up Azure credential using AzureDeveloperCliCredential with tenant_id [REDACTED]
INFO:app:AZURE_USE_AUTHENTICATION is true, setting up search index client
INFO:azure.identity.aio._internal.decorators:AzureDeveloperCliCredential.get_token succeeded
DEBUG:azure.identity.aio._internal.decorators:[Authenticated account] Client ID: [REDACTED]. Tenant ID: [REDACTED]. User Principal Name: unavailableUpn. Object ID (user): [REDACTED]
INFO:azure.core.pipeline.policies.http_logging_policy:Request URL: '[REDACTED]'
Request method: 'GET'
Request headers:
    'Accept': 'application/json;odata.metadata=minimal'
    'x-ms-client-request-id': [REDACTED]
    'User-Agent': 'azsdk-python-search-documents/11.6.0b6 Python/3.13.1 (Linux-5.15.167.4-microsoft-standard-WSL2-x86_64-with-glibc2.35)'
    'Authorization': 'REDACTED'
No body was attached to the request
INFO:azure.core.pipeline.policies.http_logging_policy:Response status: 200
Response headers:
    'Transfer-Encoding': 'chunked'
    'Content-Type': 'application/json; odata.metadata=minimal; odata.streaming=true; charset=utf-8'
    'Content-Encoding': 'REDACTED'
    'Etag': '"0x8DD3EFDDBB80FC5"'
    'Vary': 'REDACTED'
    'Server': 'Microsoft-IIS/10.0'
    'Strict-Transport-Security': 'REDACTED'
    'Preference-Applied': 'REDACTED'
    'OData-Version': 'REDACTED'
    'request-id': [REDACTED]
    'elapsed-time': 'REDACTED'
    'Strict-Transport-Security': 'REDACTED'
    'Date': 'Tue, 25 Feb 2025 06:36:00 GMT'
INFO:root:AZURE_USE_AUTHENTICATION is True
INFO:root:AZURE_ENFORCE_ACCESS_CONTROL is True
INFO:root:AZURE_ENABLE_GLOBAL_DOCUMENT_ACCESS is True
INFO:root:AZURE_ENABLE_UNAUTHENTICATED_ACCESS is False
DEBUG:urllib3.util.retry:Converted retries value: 1 -> Retry(total=1, connect=None, read=None, redirect=None, status=None)
DEBUG:msal.authority:Initializing with Entra authority: [REDACTED]
DEBUG:urllib3.connectionpool:Starting new HTTPS connection (1): login.microsoftonline.com:443
DEBUG:urllib3.connectionpool:https://login.microsoftonline.com:443 "GET /[REDACTED]/v2.0/.well-known/openid-configuration HTTP/11" 200 1753
DEBUG:msal.authority:openid_config("https://login.microsoftonline.com/[REDACTED]/v2.0/.well-known/openid-configuration") = { ... }
INFO:app:USE_USER_UPLOAD is true, setting up user upload feature
INFO:strategy:SearchIndexerClient credential: <azure.identity.aio._credentials.azd_cli.AzureDeveloperCliCredential object at [REDACTED]>
INFO:strategy:SearchIndexerClient endpoint: [REDACTED]
INFO:strategy:SearchIndexerClient index_name: gptkbindex
INFO:app:USE_SPEECH_OUTPUT_AZURE is true, setting up Azure speech service
INFO:app:OPENAI_HOST is azure, setting up Azure OpenAI client
INFO:app:Using Azure credential (passwordless authentication) for Azure OpenAI client
DEBUG:httpx:load_ssl_context verify=True cert=None trust_env=True http2=False
DEBUG:httpx:load_verify_locations cafile='/search-openai-demo/.venv/lib/python3.13/site-packages/certifi/cacert.pem'
[2025-02-25 07:36:01 +0100] [63854] [INFO] Running on http://127.0.0.1:50505 (CTRL + C to quit)
INFO:hypercorn.error:Running on http://127.0.0.1:50505 (CTRL + C to quit)
[2025-02-25 07:37:53 +0100] [63854] [INFO] 127.0.0.1:38988 GET /assets/index-B6YJf-do.css 1.1 200 13530 924425
[2025-02-25 07:37:59 +0100] [63854] [INFO] 127.0.0.1:39010 GET /assets/index-DBB953NT.js.map 1.1 200 230326 6569088
[2025-02-25 07:38:01 +0100] [63854] [INFO] 127.0.0.1:39020 GET /assets/fluentui-react-CQgpO_lM.js.map 1.1 200 1475745 8356828
[2025-02-25 07:38:01 +0100] [63854] [INFO] 127.0.0.1:39024 GET /assets/vendor-tyjrhANx.js.map 1.1 200 5924617 8934693
[2025-02-25 07:38:01 +0100] [63854] [INFO] 127.0.0.1:39004 GET /assets/fluentui-icons-7bU8QGpY.js.map 1.1 200 6642597 9017416
-------------
Browser console error:
Uncaught TypeError: Cannot read properties of undefined (reading 'createContext')
    at IconDirectionContext.js:2:49


"import * as React from 'react';" only found in /app/backend/static/assets/vendor-tyjrhANx.js.map

It looks like the project might not be properly importing React, or there could be multiple versions of React causing conflicts. Since the error message points to createContext being undefined, let's go through a few debugging steps:

[aneesha-yit]

Is there any possibility for any fix @pamelafox
Our project has stopped for 2 weeks now, because of this issue. If you have found a resolution, could you please help us with the steps to be followed.
I am also facing the exact same issue faced by @cyarmer

[aneesha-yit]

Browser console error:

IconDirectionContext.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'createContext')
at IconDirectionContext.js:2:49

import * as React from 'react';
const IconDirectionContext = React.createContext(undefined);
const IconDirectionContextDefaultValue = {};
export const IconDirectionContextProvider = IconDirectionContext.Provider;
export const useIconContext = () => React.useContext(IconDirectionContext) ? React.useContext(IconDirectionContext) : IconDirectionContextDefaultValue;

[cyarmer]

I figured this problem out. I haven't resolved it all the way yet but hopefully will get it figured out. We have done lots of modifications and added approaches for our business needs on this as I am sure others have too. We originally got this from github a couple years back. We use this with databases and text to sql and other ways instead of just a doc chat. We have not updated our end with new releases very often since we have altered it so much and not wanting to redo everything to often.

The issue is a fluenti version conflict. Doing a hybrid of fluenti v8 and v9 does not work( that is the issue). So to resolve this I had to rebuild the entire frontend and move ever icon , button , drop down to fluenti 9. After working through all the errors and getting all of them fixed and v8 out of the code I no longer have a blank page. Still a few other issues with login button dissappeared but hopefully once i get that back i should be up and running again. fluenti v9 looks nicer as well. Hopefully that helps others out as well. I primarily used gpt to update the code for me. the new 4.5 version was the one that helped me discover the issue and started changing things over but I found 01 was more thorough in updating all the icons and components on the first attempt. Good luck.