Tutorial - How to run the sample component - fails

[WebPortal]

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?

[cchannon]

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:

[WebPortal]

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.

[WebPortal]

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"]
    }

[WebPortal]

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.

[cchannon · Accepted solution]

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.

[WebPortal]

@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!

[mrXyz]

Thank you !! You made my day 🙂

[DRay6t]

You kind man, lightened my burden and my day