Plugin development: imports are confusing

[mgalesloot]

Describe the bug

Plugin development: imports are confusing

Third party imports

• Use the tsconfig.json as generated by @kinvolk/headlamp-plugin upgrade
• In tsconfig compilerOptions set "strict" to true.
• Run npm run tsc
• Result: errors on import of third party lib such as MUI.
• Now set compilerOptions.paths to {} and run tsc again
• Result: no errors MUI imports.

I think it is the wildcard path "*" which is causing this issue. I have put this path to [''] in tsconfig as a workaround.

getAllowedNamespaces

In plugin development (e.g. Kubescape plugin) we use the method getAllowedNamespaces.
Visual Code suggests the import address for this method is '@kinvolk/headlamp-plugin/lib/lib/k8s/cluster';
On running the app this gives an error: getAllowedNamespace is undefined.

After changing the import to '@kinvolk/headlamp-plugin/lib/k8s/cluster' (one lib, not two) the app works fine. Changing k8s to uppercase does not help.

Adding the following line to compilerOptions in the plugin tsconfig.json fixes the issue.

"@kinvolk/headlamp-plugin/lib/k8s/*": [
        "node_modules/@kinvolk/headlamp-plugin/lib/lib/k8s/*/index.d.ts",
        "node_modules/@kinvolk/headlamp-plugin/lib/lib/k8s/*.d.ts"
      ]

Environment

• latest headlamp from main
• headlamp in cluster v0.28

Are you able to fix this issue?

No