Stuck on gulp build - Error TS2345: Argument of type Property 'flags' is protected but type 'SPHttpClientConfiguration' is not a class derived from 'SPHttpClientConfiguration'.

[PearlNava]

Hi Guys I'm stuck in this I tried remove the node-modules and replace it with a freshly folder from a new project, I tried remove the import from dependencies, I tried install again the npm install Sp-http, nothing worked for me

please help

Error - [tsc] src/webparts/clbHome/components/ChampionvView.tsx(236,11): error TS2345: Argument of type 'import("C:/Temp/Trial1001/node_modules/@microsoft/sp-http/dist/index-internal").SPHttpClientConfiguration' is not assignable to parameter of type 'import("C:/Temp/Trial1001/node_modules/@microsoft/sp-component-base/node_modules/@microsoft/sp-http/dist/index-internal").SPHttpClientConfiguration'. [15:29:36] [tsc] Property 'flags' is protected but type 'SPHttpClientConfiguration' is not a class derived from 'SPHttpClientConfiguration'.

This is what I have on package,json

"dependencies": { "@fluentui/date-time-utilities": "^7.9.1", "@fluentui/react": "^7.177.2", "@material-ui/core": "^4.12.3", "@material-ui/data-grid": "^4.0.0-alpha.37", "@material-ui/lab": "^4.0.0-alpha.60", "@microsoft/sp-application-base": "^1.15.2", "@microsoft/sp-core-library": "1.13.0", "@microsoft/sp-http": "^1.15.2",

this is the import on my file

import { SPHttpClient, SPHttpClientResponse } from "@microsoft/sp-http";

this is what the webpart code has it from the folder downloaded zip (what I marked on bold is where the issue shows up) public options() { let optionArray = []; let optionArrayIds = []; if (this.state.edetails.length == 0) this.props.context.spHttpClient .get(

      "/" +
      this.state.inclusionpath +
      "/" +
      this.state.sitename +
      "/_api/web/lists/GetByTitle('Events List')/Items",
      ****SPHttpClient.configurations.v1****
    )
    **.then(async (response: SPHttpClientResponse)** => {

[v-saikirang]

Hi @PearlNava,

Thanks for reaching out to us.

May I know if you are trying to customize the app or are you trying to just deploy the app as it is.

Thanks.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment.

[v-saikirang]

HI @PearlNava,

Unfortunately we will not be able to support customizations. I am afraid we will not be able to help you here.

Few suggestions: 1) Make sure you have the right development environment set up. This template is compatible with Node 14 and built on SPFX version 1.13.0. 2) Try creating a blank project and see if it works without any issues 3) If a blank project works you can try to compare and narrow down the issue.

Thanks.

[PearlNava]

I had this versions: PS C:\Users\PXN> node --version v14.20.1 PS C:\Users\PXN> npm ls -g --depth=0 C:\Users\PXN\AppData\Roaming\npm +-- @microsoft/generator-sharepoint@1.15.2 +-- gulp@4.0.2 +-- gulp-cli@2.3.0 +-- less@4.1.3 +-- node-modules@1.0.1 +-- sass@1.55.0 +-- typescript@4.8.4 +-- yarn@1.22.19 `-- yo@4.3.0

Now I have this: PS C:\Users\PXN> npm ls -g --depth=0 C:\Users\PXN\AppData\Roaming\npm +-- @microsoft/generator-sharepoint@1.13.0 +-- gulp-cli@2.3.0 `-- yo@4.3.0 PS C:\Users\PXN> npm -v 6.14.17

and now is not allowing me to install npm install is erroring npm ERR! clb@0.0.1 preinstall: npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the clb@0.0.1 preinstall script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[PearlNava]

After install the npm install i still got this error

[15:43:22] Error - [tsc] src/webparts/clbHome/components/ClbAddMember.tsx(486,14): error TS2786: 'PeoplePicker' cannot be used as a JSX component. [15:43:22] [tsc] Its instance type 'PeoplePicker' is not a valid JSX element. [15:43:22] [tsc] The types returned by 'render()' are incompatible between these types. [15:43:22] [tsc] Type 'ReactElement<IPeoplePickerProps, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)>' is not assignable to type 'ReactNode'. [15:43:22] [tsc] Property 'children' is missing in type 'ReactElement<IPeoplePickerProps, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)>' but required in type 'ReactPortal'. [15:43:22] Error - [tsc] src/webparts/clbHome/components/ClbHome.tsx(1314,16): error TS2786: 'TOTLandingPage' cannot be used as a JSX component. [15:43:22] [tsc] Its instance type 'TOTLandingPage' is not a valid JSX element. [15:43:22] [tsc] The types returned by 'render()' are incompatible between these types. [15:43:22] [tsc] Type 'ReactElement<ITOTLandingPageProps, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)>' is not assignable to type 'ReactNode'.

Any ideas ? please help

[v-saikirang]

Hi @PearlNava,

Please allow us some time. We will look in to this and get back you. Thanks.

[PearlNava]

this is the version that I have of React and React-Dom npm view react version 18.2.0

and this for @types/react npm view @types/react

@types/react@18.0.24 | MIT | deps: 3 | versions: 425 TypeScript definitions for React https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react

dist .tarball: https://registry.npmjs.org/@types/react/-/react-18.0.24.tgz .shasum: 2f79ed5b27f08d05107aab45c17919754cc44c20 .integrity: sha512-wRJWT6ouziGUy+9uX0aW4YOJxAY0bG6/AOk5AW5QSvZqI7dk6VBIbXvcVgIw/W5Jrl24f77df98GEKTJGOLx7Q== .unpackedSize: 177.5 kB

dependencies: @types/prop-types: @types/scheduler: csstype: ^3.0.2

I've tried to install the 16.9.51 but it does not exist on the versioning from vendor

Thanks appreciate your help

[v-prigunasek]

Hi @PearlNava ,

Below are the configurations, we have in our dev environment +-- @microsoft/generator-sharepoint@1.13.0 +-- gulp@4.0.2 +-- typescript@4.5.5 `-- yo@3.1.1 node v14.18.2 npm 6.14.15

Can you please follow the below steps, to fix the above issues/errors ?

1. Download the code from this repo
2. Please make sure to have the development environment with the above configurations.
3. In VSCode, open the code and remove this line from package.json file "preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions"
4. Delete the package-lock.json file
5. Run npm install
6. Then run the below command to install these specific versions npm i @types/react-dom@18.0.6 @types/react@18.0.21 @fluentui/react@8.98.8 @pnp/spfx-controls-react@3.9.0 @microsoft/sp-http@1.13.0

These versions will resolve most of the above issues/errors: https://github.com/OfficeDev/microsoft-teams-apps-champion-management/issues/136#issue-1426211983 - This issue is because of the @microsoft/sp-http@1.15.2 version. https://github.com/OfficeDev/microsoft-teams-apps-champion-management/issues/136#issuecomment-1297447437 - This is related to the @types/react and @types/react-dom version

7. Run gulp build
8. In case if you receive the below errors

[20:12:46] Error - [tsc] src/webparts/clbHome/components/ApproveChampion.tsx(248,27): error TS2322: Type '{ value: number; onChange: (eve: FormEvent<HTMLElement | HTMLInputElement>, isChecked: boolean) => void; checked: any; }' is not assignable to type 'IntrinsicAttributes & ICheckboxProps'. [20:12:46] [tsc] Property 'value' does not exist on type 'IntrinsicAttributes & ICheckboxProps'. [20:12:46] Error - [tsc] src/webparts/clbHome/components/ChampionvView.tsx(5,8): error TS2307: Cannot find module '@fluentui/react/node_modules/office-ui-fabric-react/lib/DatePicker' or its corresponding type declarations. [20:12:46] Error - [tsc] src/webparts/clbHome/components/Header.tsx(1,10): error TS2305: Module '"../../../../node_modules/@fluentui/react/lib/Tooltip"' has no exported member 'DirectionalHint'. [20:12:46] Error - [tsc] src/webparts/clbHome/components/TOTCreateTournament.tsx(17,10): error TS2305: Module '"../../../../node_modules/@fluentui/react/lib/Tooltip"' has no exported member 'DirectionalHint'.

9. Fix these errors in the below components. In Header.tsx - Update the import to this import { DirectionalHint, TooltipHost } from '@fluentui/react';
   In TOTCreateTournament.tsx - Update the import to this - import { DirectionalHint, ITooltipProps, TooltipHost } from '@fluentui/react';
   In ChampionvView.tsx - Update the import to this - import { DatePicker, DayOfWeek, IDatePickerStrings } from "office-ui-fabric-react/lib/DatePicker";
   In ApproveChampion.tsx, Remove this property from the Checkbox component value={item.ID}

10. Run gulp build again and see if it gets succeeded.

[PearlNava]

Wha-whoo! It worked successfully!!

THANK YOU, GUYS! Really appreciate your help !!