Kibana: Building custom plugin fails when typescript is configured

[martijnrondeel]

I'm having trouble getting my plugin to build with typescript enabled. It's generated with the plugin-generator from 6.x branch, Kibana is on 6.x branch as well. It has the following added dependencies:

"dependencies": {
    "@elastic/eui": "^6.3.1",
    "@types/react": "^16.7.18",
    "@types/react-dom": "^16.0.11",
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }

As per the docs, typescript support for a custom plugin can be enabled with a simple tsconfig.json file in the plugin root.

{
  // extend Kibana's tsconfig, or use your own settings
  "extends": "../../kibana/tsconfig.json",

  // tell the TypeScript compiler where to find your source files
  "include": [
    "server/**/*",
    "public/**/*"
  ]
}

However when I run yarn build now it gives me a lot of errors (about 360+) that are not related to my plugin:

../../../../../kibana/node_modules/@types/react/index.d.ts:2419:13 - error TS2717: Subsequent property declarations must have the same type.  Property 'use' must be of type 'SVGProps<SVGUseElement>', but here has type 'SVGProps<SVGUseElement>'.

2419             use: React.SVGProps<SVGUseElement>;

../../../../../kibana/src/core/public/chrome/chrome_service.ts:20:22 - error TS7016: Could not find a declaration file for module 'url'. '/home/martijn/Repos/kibana/node_modules/url/url.js' implicitly has an 'any' type.
  Try `npm install @types/url` if it exists or add a new declaration (.d.ts) file containing `declare module 'url';`

20 import * as Url from 'url';
                        ~~~~~

../../../../../kibana/src/core/public/fatal_errors/get_error_info.ts:20:25 - error TS7016: Could not find a declaration file for module 'util'. '/home/martijn/Repos/kibana/node_modules/util/util.js' implicitly has an 'any' type.
  Try `npm install @types/util` if it exists or add a new declaration (.d.ts) file containing `declare module 'util';`

20 import { inspect } from 'util';

../../../../../kibana/src/core/public/utils/modify_url.ts:20:56 - error TS7016: Could not find a declaration file for module 'url'. '/home/martijn/Repos/kibana/node_modules/url/url.js' implicitly has an 'any' type.
  Try `npm install @types/url` if it exists or add a new declaration (.d.ts) file containing `declare module 'url';`

20 import { format as formatUrl, parse as parseUrl } from 'url';

Steps to reproduce:

1. Use Kibana 6.x branch and generate a plugin using the plugin generator node scripts/generate_plugin temporary_plugin
2. Go to kibana-extra/temporary_plugin and add a tsconfig.json with config above to the plugin root.
3. Add typescript as dependency yarn add typescript --dev.
4. Add React and EUI as dependencies yarn add react react-dom @types/react @types/react-dom @elastic/eui.
5. Rename .js files to .tsx and .ts.
6. Run yarn build.
7. Notice errors :cry:.

[danielkerwin]

Try adding the following before your include statement

  "exclude": [
    "node_modules"
  ],

I also had issues compiling with TS due to module resolution back to the kibana source - I needed to add the following in the compiler options to silence some typescript errors:

  "compilerOptions": {
    "noImplicitAny": false
  },

[martijnrondeel]

I was able to resolve this by looking at this plugin from @spalger which also uses typescript. Instead of the tsconfig.json file in the docs, I use this one now:

{
  // extend Kibana's tsconfig, or use your own settings
  "extends": "../../kibana/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "ui/*": [
        "../../kibana/src/ui/public/*"
      ],
    },
  },
  "include": [
    "public/**/*.ts",
    "public/**/*.tsx",
    "server/**/*.ts",
    "server/**/*.tsx",
    "index.ts",
  ],
}

Above config solves the build errors about Kibana code, but there will still be errors related to missing ui/chrome and ui/modules imports. You can "solve" those like this:

// @ts-ignore
import { uiModules } from 'ui/modules';
// @ts-ignore
import chrome from 'ui/chrome';

If you use EUI you'll need the following devDependencies as well: @types/enzyme and @types/react-virtualized. @danielkerwin I think it's actually better to add : any to the function parameters it complains about instead of ignoring the rule.

It would be nice if the plugin development documentation could be looked at and updated to resolve these problems.

[danielkerwin]

This seems like a better solution - thanks, I’ll try it

On 16 Jan 2019, at 10:54, Martijn Rondeel [e-mail] wrote:

I was able to resolve this by looking at this plugin from @spalger which also uses typescript. Instead of the tsconfig.json file in the docs, I use this one now:

{
// extend Kibana's tsconfig, or use your own settings
"extends": "../../kibana/tsconfig.json",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"ui/": [
"../../kibana/src/ui/public/"
],
},
},
"include": [
"public//.ts",
"public//.tsx",
"server//.ts",
"server//.tsx",
"index.ts",
],
}
Above config solves the build errors about Kibana code, but there will still be errors related to missing ui/chrome and ui/modules imports. You can "solve" those like this:

// @ts-ignore
import { uiModules } from 'ui/modules';
// @ts-ignore
import chrome from 'ui/chrome';
If you use EUI you'll need the following devDependencies as well: @types/enzyme and @types/react-virtualized. @danielkerwin I think it's actually better to add : any to the function parameters it complains about instead of ignoring the rule.

It would be nice if the plugin development documentation could be looked at and updated to resolve these problems.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[stacey-gammon]

related: #27979

[elasticmachine]

Pinging @elastic/kibana-operations

[PhaedrusTheGreek]

Related (sort of), the docs say to use "extends": "../../kibana/tsconfig.json",, but the new generator creates your plugin in plugins, so I had to change my path to "extends": "../../tsconfig.json",

[elasticmachine]

Pinging @elastic/kibana-platform (Team:Platform)

[MichaelHefetz]

I was able to resolve this by looking at this plugin from @spalger which also uses typescript. Instead of the tsconfig.json file in the docs, I use this one now:

{
  // extend Kibana's tsconfig, or use your own settings
  "extends": "../../kibana/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "ui/*": [
        "../../kibana/src/ui/public/*"
      ],
    },
  },
  "include": [
    "public/**/*.ts",
    "public/**/*.tsx",
    "server/**/*.ts",
    "server/**/*.tsx",
    "index.ts",
  ],
}

Above config solves the build errors about Kibana code, but there will still be errors related to missing ui/chrome and ui/modules imports. You can "solve" those like this:

// @ts-ignore
import { uiModules } from 'ui/modules';
// @ts-ignore
import chrome from 'ui/chrome';

If you use EUI you'll need the following devDependencies as well: @types/enzyme and @types/react-virtualized. @danielkerwin I think it's actually better to add : any to the function parameters it complains about instead of ignoring the rule.

It would be nice if the plugin development documentation could be looked at and updated to resolve these problems.

It is possible to fix ui/* imports by pointing to the correct path in compilerOptions. Like this:

{
    // extend Kibana's tsconfig, or use your own settings
    "extends": "../../tsconfig.json",
    "compilerOptions": {
        "noImplicitAny": false,
        "baseUrl": ".",
        "paths": {
            "ui/*": [
                "../../src/legacy/ui/public/*"
            ],
        },
    },
    "exclude": [
        "**/node_modules/**"
    ],
    "include": [
        "public/**/*.ts",
        "public/**/*.tsx",
        "server/**/*.ts",
        "server/**/*.tsx",
        "index.ts",
    ],
}