Tutorial - How to run the sample component - fails

Like (0) Share

Report

Posted on 23 Nov 2022 15:47:18 by WebPortal

2,291

I'm trying to follow the installation tutorial for the power apps components, but on step 7, after running:

msbuild /t:rebuild /restore /p:Configuration=Release

With the message:

C:\Users\nuno_.nuget\packages\microsoft.powerapps.msbuild.pcf\1.20.3\build\Microsoft.PowerApps.MSBuild.Pcf.targets(64,5): error MSB3073: The command "npm run build -- --noColor --buildMode production --outDir "C:\User
s\nuno_\Documents\CanvasGrid\out\controls" --buildSource MSBuild" exited with code -1. [C:\Users\nuno_\Documents\CanvasGrid\CanvasGrid.pcfproj]
Done Building Project "C:\Users\nuno_\Documents\CanvasGrid\CanvasGrid.pcfproj" (default targets) -- FAILED.

Done Building Project "C:\Users\nuno_\Documents\CanvasGrid\testes\testes.cdsproj" (rebuild target(s)) -- FAILED.

Build FAILED.

"C:\Users\nuno_\Documents\CanvasGrid\testes\testes.cdsproj" (rebuild target) (1:7) ->
"C:\Users\nuno_\Documents\CanvasGrid\CanvasGrid.pcfproj" (default target) (2:7) ->
(PcfBuild target) ->
C:\Users\nuno_.nuget\packages\microsoft.powerapps.msbuild.pcf\1.20.3\build\Microsoft.PowerApps.MSBuild.Pcf.targets(64,5): error : [pcf-1065] [Error] ESLint validation error: [C:\Users\nuno_\Documents\CanvasGrid\Can
vasGrid.pcfproj]
C:\Users\nuno_.nuget\packages\microsoft.powerapps.msbuild.pcf\1.20.3\build\Microsoft.PowerApps.MSBuild.Pcf.targets(64,5): error MSB3073: The command "npm run build -- --noColor --buildMode production --outDir "C:\Us
ers\nuno_\Documents\CanvasGrid\out\controls" --buildSource MSBuild" exited with code -1. [C:\Users\nuno_\Documents\CanvasGrid\CanvasGrid.pcfproj]

Can anyone help?

Categories:

Power Apps component framework

I have the same question (0)

All responses (8)

Answers (1)

DRay6 3 on 05 Dec 2022 at 14:59:35

Like (0)

Report

Re: Tutorial - How to run the sample component - fails

You kind man, lightened my burden and my day

Was this reply helpful? Yes No
mrXyz 3 on 05 Dec 2022 at 13:53:19

Like (0)

Report

Re: Tutorial - How to run the sample component - fails

Thank you !! You made my day 🙂

Was this reply helpful? Yes No
WebPortal 2,291 on 26 Nov 2022 at 15:52:39

Like (0)

Report
Re: Tutorial - How to run the sample component - fails

@cchannon
Thank you so much for your support!

The combination: "willingness to learn" + "erroneous tutorials" is a frustration...

Anyway, I've figured out the solution, and I've also found out that subsequent error. I've fixed it with:

this._incrementValue = context.parameters.incrementValue.raw as number;

Now, the build ran successfully and I got an "out" folder which I'm still researching about.

All the best!

Was this reply helpful? Yes No
Verified answer

cchannon 4,702 Moderator on 25 Nov 2022 at 18:08:52

Like (4)

Report
Re: Tutorial - How to run the sample component - fails

OK, I've got you. I cloned that repo and built it locally. You are very close, but yeah, I can see why you would get totally stuck here, not actually knowing how to do the code.

So you need to do two more things to get over the hump on this:

1. You need to update those eslint rules some more. copy this into your eslint rules:

"rules": { "no-unused-vars": ["warn"], "no-undef": ["warn"] }

2. You need to fix a tiny error in the code (I could explain why, but I am guessing you don't really care 😅)

Line 58 in the code, in the init method: you just need to add an exclamation point after "raw" so currently it looks like this:

this._incrementValue = context.parameters.incrementValue.raw;

and you need to update it to:

this._incrementValue = context.parameters.incrementValue.raw!;

and with both of those done, this control should correctly build for you.

Was this reply helpful? Yes No
WebPortal 2,291 on 24 Nov 2022 at 23:11:28

Like (0)

Report
Re: Tutorial - How to run the sample component - fails

Hello again @cchannon ,

After many hours of hair-pulling, I'm now trying to install this component.

Specifically, NumberButtonSelector.

I just want to install it, I don't even dream of developing one myself.

Steps:
1- Created NumberButtonSelector folder
2- Opened foder with VSCode
3- Ran pac pcf init --namespace Nuno --name NumberButtonSelector --template field
4- Downloaded code from NumberButtonSelector into NumberButtonSelector/NumberButtonSelector folder
5- Ran npm install
6- Ran npm run build
7- Got the error "no-used-vars" which I've fixed as per your post
8- Now, I'm getting the error:

C:\Users\nuno_\Documents\NumberButtonSelector>cd NumberButtonSelector [22:58:42] [build] Validating control... [22:58:43] [build] Running ESLint... [22:58:44] [build] Failed: [pcf-1065] [Error] ESLint validation error: C:\Users\nuno_\Documents\NumberButtonSelector\NumberButtonSelector\index.ts 2:10 warning 'debug' is defined but never used no-unused-vars 3:10 warning 'timingSafeEqual' is defined but never used no-unused-vars 29:24 error 'EventListenerOrEventListenerObject' is not defined no-undef 30:22 error 'EventListenerOrEventListenerObject' is not defined no-undef 31:22 error 'EventListenerOrEventListenerObject' is not defined no-undef ✖ 5 problems (3 errors, 2 warnings)

So now the error is on NumberButtonSelector\NumberButtonSelector\index.ts

Can anyone help?

I'm just trying to learn the basics of how this works: install a component and see how it works in Power Apps, that's all.

Was this reply helpful? Yes No
WebPortal 2,291 on 24 Nov 2022 at 10:58:02

Like (0)

Report
Re: Tutorial - How to run the sample component - fails

And this is my .eslintsrc.json file:

"rules": { "indent": [ "error", 4 ], /*"linebreak-style": [ "error", "windows" ],*/ "quotes": [ "error", "single" ], "semi": [ "error", "always" ], "no-used-vars": ["warn"] }

Was this reply helpful? Yes No
WebPortal 2,291 on 24 Nov 2022 at 10:53:29

Like (0)

Report
Re: Tutorial - How to run the sample component - fails

Hi @cchannon thanks so much for your support!
I'm just beginning exploring code components, and all I would like to do was to try these components and see how they work.

Anyway, after running npm run build in Visual Studio I get:

> pcf-project@1.0.0 build > pcf-scripts build [12:19:40] [build] Initializing... [12:19:40] [build] Validating manifest... [12:19:40] [build] Validating control... [12:19:41] [build] Running ESLint... ============= WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree. You may find that it works just fine, or you may not. SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.5.0 YOUR TYPESCRIPT VERSION: 4.9.3 Please only submit bug reports when using the officially supported version. ============= [12:19:42] [build] Failed: [pcf-1065] [Error] ESLint validation error: C:\Users\nuno_\Documents\CanvasGrid\CanvasGrid\Grid.tsx 1:1 error Definition for rule 'no-used-vars' was not found no-used-vars 4:9 error Replace `·ConstrainMode,·DetailsList,·DetailsListLayoutMode,·DetailsRow,·IColumn,·IDetailsHeaderProps,·IDetailsListProps,·IDetailsRowStyles·` with `⏎····ConstrainMode,⏎····DetailsList,⏎····DetailsListLayoutMode,⏎····DetailsRow,⏎····IColumn,⏎····IDetailsHeaderProps,⏎····IDetailsListProps,⏎····IDetailsRowStyles,⏎` prettier/prettier 258:28 error 'item' is missing in props validation react/prop-types 259:32 error 'item' is missing in props validation react/prop-types C:\Users\nuno_\Documents\CanvasGrid\CanvasGrid\index.ts 1:1 error Definition for rule 'no-used-vars' was not found no-used-vars ✖ 5 problems (5 errors, 0 warnings) 1 error and 0 warnings potentially fixable with the `--fix` option.

Was this reply helpful? Yes No
cchannon 4,702 Moderator on 23 Nov 2022 at 18:59:14

Like (2)

Report
Re: Tutorial - How to run the sample component - fails

Yes, your build is failing because of eslint rules. MSFT recently updated the linting rules and a lot of people have been having similar issues.

The best way to confirm this is to use the

npm run build

command directly into powershell/command prompt rather than letting the cdsproj file build it for you. You will then get the exact ESLint errors from it instead of this more generic error you're seeing. I'll bet anything that it is failing because of the new linting rule "no-unused-vars".

If I'm right about that, then all you need to do is open the .eslintsrc.json file where you will find the linting config. The last section is the actual rules themselves, where you will find "no-unused-vars". If you change this value to "off" or "warn" then ESLint will stop blocking your build and you can go back and run the commands the way you described above. That change would look like this:

Was this reply helpful? Yes No