ERROR: failed packaging service 'backend': failed invoking event handlers for 'prepackage', 'prepackage' hook failed with exit code: '2', Path: 'Temp\azd-prepackage-3470486931.ps1'. : exit code: 2

[TarunKC261]

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

Any log messages given by the failure

Expected/desired behavior

OS and Version?

Windows 7, 8 or 10. Linux (which distribution). macOS (Yosemite? El Capitan? Sierra?)

azd version?

run azd version and copy paste here.

Versions

Mention any other details that might be useful

---

Thanks! We'll be in touch soon.

[TarunKC261]

Create a new folder and switch to it in the terminal
Run azd auth login
Run azd init -t azure-search-openai-demo
Run azd up
Got above error while running azd up

[KesavarajaRK]

Try this once.
pip install -r requirements-dev.txt

[TarunKC261]

I have taken the latest update of the code.And getting the above error.

[pamelafox]

Are there any additional logs you can provide? I'd like to see what error caused the hook to fail.

[TarunKC261]

[email protected] build C:\Users\ChoubeTK\Downloads\workspace\app\frontend
tsc && vite build

| ==| Packaging service backendsrc/authConfig.ts:3:64 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

3 import { AuthenticationResult, IPublicClientApplication } from "@azure/msal-browser";
~~~~~~~~~~~~~~~~~~~~~

src/authConfig.ts:77:13 - error TS7006: Parameter 'error' implicitly has an 'any' type.

77 .catch((error) => {
~~~~~

src/components/LoginButton/LoginButton.tsx:22:19 - error TS7006: Parameter 'error' implicitly has an 'any' type.

22 .catch((error) => console.log(error));
~~~~~

src/components/LoginButton/LoginButton.tsx:30:17 - error TS7006: Parameter 'error' implicitly has an 'any' type.

30 .catch((error) => console.log(error));
~~~~~

src/index.tsx:6:65 - error TS2307: Cannot find module '@azure/msal-browser' or its corresponding type declarations.

6 import { PublicClientApplication, EventType, AccountInfo } from '@azure/msal-browser';
~~~~~~~~~~~~~~~~~~~~~

src/index.tsx:25:36 - error TS7006: Parameter 'event' implicitly has an 'any' type.

25 msalInstance.addEventCallback((event) => {
~~~~~

Found 6 errors in 3 files.

Errors Files
2 src/authConfig.ts:3
2 src/components/LoginButton/LoginButton.tsx:22
2 src/index.tsx:6
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: tsc && vite build
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ChoubeTK\AppData\Roaming\npm-cache_logs\2023-09-27T00_24_36_002Z-debug.log
(x) Failed: Packaging service backend

ERROR: failed packaging service 'backend': failed invoking event handlers for 'prepackage', 'prepackage' hook failed with exit code: '2', Path: 'C:\Users\ChoubeTK\AppData\Local\Temp\azd-prepackage-4273095110.ps1'. : exit code: 2

[pamelafox]

@mattmsft Could you look into why the package isn't found?

[crampaldo]

I have the same error when running azd up. Here's my log:

Try npm i --save-dev @types/fluentui__react-table if it exists or add a new declaration (.d.ts) file containing declare module '@fluentui/react-table';

12 } from '@fluentui/react-table';
~~~~~~~~~~~~~~~~~~~~~~~

src/components/TokenClaimsDisplay/TokenClaimsDisplay.tsx:46:25 - error TS7006: Parameter 'item' implicitly has an 'any' type.

46 renderCell: item => {
~~~~

src/components/TokenClaimsDisplay/TokenClaimsDisplay.tsx:58:25 - error TS7006: Parameter 'item' implicitly has an 'any' type.

58 renderCell: item => {
~~~~

src/components/TokenClaimsDisplay/TokenClaimsDisplay.tsx:71:27 - error TS7006: Parameter 'item' implicitly has an 'any' type.

71 getRowId={item => item.name}
~~~~

src/components/TokenClaimsDisplay/TokenClaimsDisplay.tsx:75:25 - error TS7031: Binding element 'renderHeaderCell' implicitly has an 'any' type.

75 {({ renderHeaderCell }) => {renderHeaderCell()}}
~~~~~~~~~~~~~~~~

src/components/TokenClaimsDisplay/TokenClaimsDisplay.tsx:79:21 - error TS7031: Binding element 'item' implicitly has an 'any' type.

79 {({ item, rowId }) => (
~~~~

src/components/TokenClaimsDisplay/TokenClaimsDisplay.tsx:79:27 - error TS7031: Binding element 'rowId' implicitly has an 'any' type.

79 {({ item, rowId }) => (
~~~~~

src/components/TokenClaimsDisplay/TokenClaimsDisplay.tsx:81:25 - error TS7031: Binding element 'renderCell' implicitly has an 'any' type.

81 {({ renderCell }) => {renderCell(item)}}
~~~~~~~~~~

Found 8 errors in the same file, starting at: src/components/TokenClaimsDisplay/TokenClaimsDisplay.tsx:12

(x) Failed: Packaging service backend

ERROR: failed packaging service 'backend': failed invoking event handlers for 'prepackage', 'prepackage' hook failed with exit code: '2', Path: 'C:\Users\XXXX\XXX\Local\Temp\azd-prepackage-2967539339.ps1'. : exit code: 2

[pamelafox]

@crampaldo What node version are you running? Wondering if thats causing the issue (as I haven't managed to replicate).

[crampaldo]

I have version 18.18.0

[pamelafox]

Interesting, I can't get it to show those errors. However, I've added types, please try changes in https://github.com/Azure-Samples/azure-search-openai-demo/pull/695/files

[crampaldo]

Thank you Pamela, I tried but still getting this error:

src/components/TokenClaimsDisplay/TokenClaimsDisplay.tsx:71:61 - error TS7031: Binding element 'renderCell' implicitly has an 'any' type.

71 <DataGridRow key={rowId}>{({ renderCell }) => {renderCell(item)}}
~~~~~~~~~~

Found 2 errors in the same file, starting at: src/components/TokenClaimsDisplay/TokenClaimsDisplay.tsx:13

(x) Failed: Packaging service backend

ERROR: failed packaging service 'backend': failed invoking event handlers for 'prepackage', 'prepackage' hook failed with exit code: '2', Path: 'C:\Users\XXXX\XXX\Local\Temp\azd-prepackage-189254659.ps1'. : exit code: 2

[crampaldo]

Updates, I solved the two by doing "npm i @fluentui/react-table" and claiming the item also for the renderCell in line 72:
{({ renderCell }: { renderCell: (item: Claim) => React.ReactNode }) => {renderCell(item)}}.

However, now I am getting this:
error TS2786: 'DataGrid' cannot be used as a JSX component.
Its type 'ForwardRefExoticComponent<DataGridProps & RefAttributes>' is not a valid JSX element type.
Type 'ForwardRefExoticComponent<DataGridProps & RefAttributes>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Type 'import("C:/Users/XXX/XXX/XX/XX/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
Type 'ReactElement<any, string | JSXElementConstructor>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor>' but required in type 'ReactPortal'.

63 <DataGrid items={items} columns={columns} sortable getRowId={(item: Claim) => item.name}>
~~~~~~~~

node_modules/@types/react/index.d.ts:198:9
198 children: ReactNode;
~~~~~~~~
'children' is declared here.

src/components/TokenClaimsDisplay/TokenClaimsDisplay.tsx:64:18 - error TS2786: 'DataGridHeader' cannot be used as a JSX component.
Its type 'ForwardRefExoticComponent<TableHeaderProps & RefAttributes>' is not a valid JSX element type.
Type 'ForwardRefExoticComponent<TableHeaderProps & RefAttributes>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Type 'import("XXX/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.

64
~~~~~~~~~~~~~~

src/components/TokenClaimsDisplay/TokenClaimsDisplay.tsx:66:25 - error TS2769: No overload matches this call.
Overload 1 of 2, '(props: Omit<TableRowProps, "children"> & Omit<ComponentProps, "children"> & { children: CellRenderFunction; } & RefAttributes<...>): ReactNode', gave the following error.
Type '({ renderHeaderCell }: { renderHeaderCell: () => React.ReactNode; }) => JSX.Element' is not assignable to type 'CellRenderFunction'.
Types of parameters '__0' and 'column' are incompatible.
Type 'TableColumnDefinition' is not assignable to type '{ renderHeaderCell: () => ReactNode; }'.
The types returned by 'renderHeaderCell()' are incompatible between these types.
Type 'import("XXX/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
Overload 2 of 2, '(props: DataGridRowProps): Element', gave the following error.
Type '({ renderHeaderCell }: { renderHeaderCell: () => React.ReactNode; }) => JSX.Element' is not assignable to type 'CellRenderFunction'.

66 {({ renderHeaderCell }: { renderHeaderCell: () => React.ReactNode }) => {renderHeaderCell()}}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../../node_modules/@fluentui/react-table/dist/index.d.ts:242:5
242 children: CellRenderFunction;
~~~~~~~~
The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & Omit<TableRowProps, "children"> & Omit<ComponentProps, "children"> & { ...; } & RefAttributes<...>'
../../node_modules/@fluentui/react-table/dist/index.d.ts:242:5
242 children: CellRenderFunction;
~~~~~~~~
The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & Omit<TableRowProps, "children"> & Omit<ComponentProps, "children"> & { ...; }'

src/components/TokenClaimsDisplay/TokenClaimsDisplay.tsx:66:98 - error TS2786: 'DataGridHeaderCell' cannot be used as a JSX component.
Its type 'ForwardRefExoticComponent<DataGridHeaderCellProps & RefAttributes>' is not a valid JSX element type.
Type 'ForwardRefExoticComponent<DataGridHeaderCellProps & RefAttributes>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Type 'import("XXX/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.

66 {({ renderHeaderCell }: { renderHeaderCell: () => React.ReactNode }) => {renderHeaderCell()}}
~~~~~~~~~~~~~~~~~~

src/components/TokenClaimsDisplay/TokenClaimsDisplay.tsx:72:29 - error TS2322: Type '({ renderCell }: { renderCell: (item: Claim) => React.ReactNode; }) => JSX.Element' is not assignable to type 'CellRenderFunction'.
Types of parameters '__0' and 'column' are incompatible.
Type 'TableColumnDefinition' is not assignable to type '{ renderCell: (item: Claim) => ReactNode; }'.
The types returned by 'renderCell(...)' are incompatible between these types.
Type 'import("XXX/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.

72 {({ renderCell }: { renderCell: (item: Claim) => React.ReactNode }) => {renderCell(item)}}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../../node_modules/@fluentui/react-table/dist/index.d.ts:242:5
242 children: CellRenderFunction;
~~~~~~~~
The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & Omit<TableRowProps, "children"> & Omit<ComponentProps, "children"> & { ...; }'

src/components/TokenClaimsDisplay/TokenClaimsDisplay.tsx:72:101 - error TS2786: 'DataGridCell' cannot be used as a JSX component.
Its type 'ForwardRefExoticComponent<DataGridCellProps & RefAttributes>' is not a valid JSX element type.
Type 'ForwardRefExoticComponent<DataGridCellProps & RefAttributes>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Type 'import("XXX/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.

72 {({ renderCell }: { renderCell: (item: Claim) => React.ReactNode }) => {renderCell(item)}}
~~~~~~~~~~~~

Found 6 errors in the same file, starting at: src/components/TokenClaimsDisplay/TokenClaimsDisplay.tsx:63

(x) Failed: Packaging service backend

ERROR: failed packaging service 'backend': failed invoking event handlers for 'prepackage', 'prepackage' hook failed with exit code: '2', Path: 'XXX\AppData\Local\Temp\azd-prepackage-477418279.ps1'. : exit code: 2

[crampaldo]

Are there any updates?

[pamelafox]

I still haven't managed to replicate the issue, so it is difficult to fix. I looked into that error and found this interesting thread: https://stackoverflow.com/a/72714740/1347623
Can you see if the ideas there are helpful?

[crampaldo]

Thank you Pamela, I will look at those ideas

[mattgotteiner]

it's possible i'm pulling in a bad version

AzureAD/microsoft-authentication-library-for-js#6310

[mattgotteiner]

@crampaldo wondering if this will fix your issue

#745

[mattgotteiner]

@crampaldo , @ChoubeTK please let me know if this fixes your issue

[TarunKC261]

[TarunKC261]

Still getting above errors while I am taking the latest code and trying to make environment up(azd up).

[TarunKC261]

[pamelafox]

Did you try explicitly adding scheduler to package.json? Someone mentioned that worked for them.

[TarunKC261]

Can you please mention specifically what needs to be added and to which file or send some link which can help?

[pamelafox]

In app/frontend/package.json, try adding this to dependencies:

"scheduler": "^0.20.2",

And then re-running "npm install" and seeing if you get same error.

[dnhlms]

I was getting the 'scheduler error. Adding the dependency suggested solved it for me. My error was exactly like the screenshot posted by ChoubeTK.

[TarunKC261]

Adding scheduler to package.json solved the issue for me.
@pamelafox Thanks a lot for helping.

[mattgotteiner]

Thank you @pamelafox , will open a PR for this