react-azure-openai-api-stream Production and Local Errors

[gspgit00]

Disclaimer

Yes

Sample

https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-azure-openai-api-stream

Contributor(s)

Luis Manez and Chris Kent

What happened?

Loading in workbench is successful and works as designed. Loading in local or production shows the "Something went wrong..." error with additional information in the console.

Could not load chat-streaming-web-part in require. TypeError: Cannot read properties of undefined (reading 'id')
at sp-pages-assembly_en…380f4c.js:206:11116
at new Promise ()
at e.loadComponent (sp-pages-assembly_en…380f4c.js:206:11084)
at sp-pages-assembly_en…380f4c.js:206:13292
at async Promise.all (/sites/HR/SitePages/index 0)

Steps to reproduce

1. Clone the repo
2. Clean
3. Build
4. Bundle and Package (local or production)

Expected behavior

I expected to see the web part behave as it does in workbench, but I'm receiving errors.

Target SharePoint environment

SharePoint Online

Developer environment

Windows

Browsers

• Internet Explorer
• Microsoft Edge
• Google Chrome
• FireFox
• Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

What version of Node.js is currently installed on your workstation?

18.20.4

What version of Node.js is required by the sample?

I built at 18.20.4 first, rebuilt with 16.20.2 (incompatible), rebuilt with 18.20.4

Paste the results of SPFx doctor

Verifying configuration of your system for working with the SharePoint Framework

√ SharePoint Framework v1.18.2
√ Node v18.20.4
√ yo v5.0.0
√ gulp-cli v2.3.0
√ bundled typescript used

Additional environment details

No response

[gspgit00]

Adding additional info:

"dependencies": { "@fluentui/react": "^8.106.4", "@microsoft/fetch-event-source": "2.0.1", "@microsoft/mgt-react": "3.0.1", "@microsoft/mgt-spfx": "3.1.3", "@microsoft/sp-component-base": "1.18.2", "@microsoft/sp-core-library": "1.18.2", "@microsoft/sp-lodash-subset": "1.18.2", "@microsoft/sp-office-ui-fabric-core": "1.18.2", "@microsoft/sp-property-pane": "1.18.2", "@microsoft/sp-webpart-base": "1.18.2", "@pnp/cli-microsoft365": "^9.1.0", "@pnp/spfx-property-controls": "3.15.1", "react": "17.0.1", "react-dom": "17.0.1", "react-remark": "^2.1.0", "remark-gfm": "1.0.0", "tslib": "2.3.1" },

[NishkalankBezawada]

Hello @gspgit00

Did you try out with node v16.18.1? The .nvmrc file says it :)

Thanks,
Nishkalank

[gspgit00]

Hi @NishkalankBezawada.

I did a fresh clone and installed with 16.18.1 and received the same "Unsupported engine" errors. It's requesting a more recent node package.

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@azure/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@microsoft/[email protected]',
npm WARN EBADENGINE required: { node: '>=18.17.1 <19.0.0' },
npm WARN EBADENGINE current: { node: 'v16.18.1', npm: '8.19.2' }
npm WARN EBADENGINE }

I also received the original error when packaging for local.

[ervingayle]

The '@azure/[email protected]' package seems to require node v18 since October 2023 in this commit. Perhaps the nvmrc file was just not updated when this sample was published. I see SPFx 1.18.0 is supposed to support Node 16 and 18 however since you didn't get these dependency errors in Node 18, I would say that is the better setup. Did you try to deploy the web-part as a test and see if it works or are you only testing from the workbench?

[gspgit00]

Yes, I deployed as both local and production using 18.20.4. Workbench works great, but production is where I receive "Cannot ready properties of..." error.

[ervingayle]

The video on the web-part sample page, shows some user info being populated and the mgt-spfx components require different permissions depending on the component being used. In this case, the Person component is being used. However, the permissions for this component to make graph calls are not added to the package-solution.json file. I am going to try this and report back.

[ervingayle]

So I spent some time today, testing a few scenarios and I have not been able to resolve the issue. I think its related to the mgt-spfx package being decommissioned. Even if you have it in your tenant now, I cannot guarantee that it will work with the disambiguation changes that are recommended. I am working on it but it will take a bit longer and while we are here, the solution might as well get upgraded to SPFx 1.20. There are some small things also like the API version that is listed in the solution and that should be a property pane value, etc.

[gspgit00]

I was able to get it working yesterday afternoon by removing mgt-spfx and its references. I've also fully customized configurations to also work with Azure Search resources. I'll keep an eye open for changes to the existing and upload my version when it's to @jsmileyb for anyone interested.