Tons of linting errors in tsx files from pcui components

[Weichengfang]

The VS Code is reporting tons of source problems, though the code builds fine. see the example below:

JSX element class does not support attributes because it does not have a 'props' property. 'Container' cannot be used as a JSX component. Its type 'typeof Container' is not a valid JSX element type. Types of construct signatures are incompatible. Type 'new (args?: Readonly) => Container' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'. Type 'Container' is missing the following properties from type 'Component<any, any, any>': context, setState, forceUpdate, render, and 3 more.

To reproduce it, pull latest main branch, and open the root folder in VS Code, next open any tsx files in VS Code, It will report a lot of problems similar to above.

[willeastcott]

This is an issue with PCUI. Moving this issue there...

[Weichengfang]

Thanks

[HusakYurii]

I was about to open a similar issue but I found this one. I haven't used the PCIU since my first attempt (in 2021). I had some issues with importing classes at that time, but in v4.x.x it improved. Yet I faced linting errors when tried the library this time in my React TS project. I was checking the package files and I found that the exports for the react don't specify the path to the d.ts file.

if you go to node_modules/@playcanvas/pciu/package.json you will see that the export for the react file doesn't have a reference to d.ts file

 "exports": {
    "./react": "./react/dist/module/src/index.mjs",
  },

If you change that to this, it should fix many issues with TS linter

"exports": {
"./react": {
      "main": "./react/dist/module/src/index.mjs",
      "types": "./react/types/index.d.ts"
    },
}

@Weichengfang , I wonder if that also can help you to get rid of the lining errors. @willeastcott could it be added as a fix to the library? Thanks

[slimbuck]

Hi @HusakYurii,

Thanks so much for this!

Just curious, why not submit a PR with the fix yourself?

[HusakYurii]

Hey @slimbuck Thanks for your question. I would do that but neither main nor release-4.0 branches have react/types folder here, on githab. Only the npm package has all the compiled files. It seems as if src files for react were supplied via sub repository or someting.

[willeastcott]

@HusakYurii The react\types folder is generated by running npm run build:types.

[willeastcott]

@Weichengfang Did I move this issue here from the 'model-viewer` repo? If so, I believe I fixed this with this PR: https://github.com/playcanvas/model-viewer/pull/274 Please let me know if this is all OK for you now.

@HusakYurii Can you provide me with a simple way to reproduce the problem you're experiencing? The model-viewer repo uses the React flavor of PCUI and it works just fine without errors.

[HusakYurii]

@willeastcott my apologies for being very very slow....

The issue I mentioned, probably, relates to the one you have here https://github.com/playcanvas/model-viewer/pull/274
I have created this repo so you can clone it and see the errors. I used Node v16.20.2 npm 8.19.4 to create react ts project using vit. https://github.com/HusakYurii/pcui-example

1) Clone it and install all the dependencies. 2) Go to the App.tsx and see the error of the import of pcui components for react It says

Could not find a declaration file for module '@playcanvas/pcui/react'. '[path]/node_modules/@playcanvas/pcui/react/dist/module/src/index.mjs' implicitly has an 'any' type.
There are types at '[path]/node_modules/@playcanvas/pcui/react/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@playcanvas/pcui' library may need to update its package.json or typings.ts(7016)

To fix this, I did this 1) Go to @playcanvas/pcui/package.json 2) replace

"./react": "./react/dist/module/src/index.mjs",

to

"./react": {
      "main": "./react/dist/module/src/index.mjs",
      "types": "./react/types/index.d.ts"
    },

That will explicitly point to the correct d.ts file to make vs code happy. That will also enable TS to autocomplete things in the code. I hope that helps

[willeastcott]

Hi @HusakYurii. Thanks very much for the instructions on how to fix this. I have applied this patch and just released PCUI 4.2.0. Please test it and let me know if you have any problems. 🙏

[HusakYurii]

Thank you for fixing that! I don't think I will use the library any soon but I hope that helps others!