Custom plugin with typescript support works fine in development environment but build fails with yarn build

Elastic Stack Kibana
1

Hi,

I am new to kibana custom plugin building.

i want to developed kibana custom plugin with typescript enabled.
i have setup kiaban development enviroment correctly. My plugin is working fine in development enviroment but when i build it throws lots of error realted to nide_modules and typescript

my package,json file is this.

{
"name": "orbat",
"version": "0.0.0",
"description": "orbat",
"main": "index.js",
"kibana": {
"version": "6.8.0",
"templateVersion": "1.0.0"
},
"scripts": {
"preinstall": "node ../../kibana/preinstall_check",
"kbn": "node ../../kibana/scripts/kbn",
"es": "node ../../kibana/scripts/es",
"lint": "eslint .",
"start": "plugin-helpers start",
"test:server": "plugin-helpers test:server",
"test:browser": "plugin-helpers test:browser",
"build": "plugin-helpers build"
},
"dependencies": {
"@elastic/eui": "^14.4.0",
"@types/enzyme": "^3.10.3",
"@types/react-virtualized": "^9.21.5",
"body-scroll-lock": "^2.5.10",
"classnames": "^2.2.6",
"d3": "^5.7.0",
"debug": "^4.1.0",
"isomorphic-fetch": "^2.2.1",
"leaflet": "^1.3.4",
"lodash": "^4.17.11",
"mobx": "^5.5.0",
"mobx-react": "^5.2.8",
"mobx-utils": "^5.0.2",
"moment": "^2.22.2",
"next": "^7.0.1",
"normalize.css": "^8.0.0",
"polished": "^2.2.0",
"popmotion": "^8.4.1",
"react": "^16.5.2",
"react-compound-slider": "^0.16.2",
"react-dom": "^16.5.2",
"react-leaflet": "^2.0.1",
"react-pose": "^3.3.6",
"reuse": "^1.0.4",
"styled-components": "^3.4.9"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.2",
"@elastic/eslint-config-kibana": "link:../../kibana/packages/eslint-config-kibana",
"@elastic/eslint-import-resolver-kibana": "link:../../kibana/packages/kbn-eslint-import-resolver-kibana",
"@kbn/plugin-helpers": "link:../../kibana/packages/kbn-plugin-helpers",
"@svgr/webpack": "^3.1.0",
"@types/classnames": "^2.2.6",
"@types/d3": "^5.0.0",
"@types/isomorphic-fetch": "0.0.34",
"@types/leaflet": "^1.2.11",
"@types/lodash": "^4.14.116",
"@types/moment": "^2.13.0",
"@types/next": "^7.0.0",
"@types/react": "^16.4.14",
"@types/react-dom": "^16.0.8",
"@types/react-leaflet": "^1.1.6",
"@types/styled-components": "^3.0.1",
"@zeit/next-css": "^1.0.1",
"@zeit/next-typescript": "^1.1.1",
"babel-eslint": "^9.0.0",
"babel-plugin-styled-components": "^1.8.0",
"eslint": "^5.6.0",
"eslint-plugin-babel": "^5.2.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^21.26.2",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-mocha": "^5.2.0",
"eslint-plugin-no-unsanitized": "^3.0.2",
"eslint-plugin-prefer-object-spread": "^1.2.1",
"eslint-plugin-react": "^7.11.1",
"expect.js": "^0.3.1",
"mobx-react-devtools": "^6.0.3",
"prettier": "^1.14.3",
"tslint": "^5.11.0",
"tslint-config-prettier": "^1.15.0",
"tslint-plugin-prettier": "^2.0.1",
"tslint-react": "^3.6.0",
"typescript": "^3.1.3"
}
}

Error which i am getting during build :-

2945 sub: React.DetailedHTMLProps<React.HTMLAttributes, HTMLElement>;
~~~

../../../node_modules/@types/next-server/node_modules/@types/react/index.d.ts:2924:13
2924 sub: React.DetailedHTMLProps<React.HTMLAttributes, HTMLElement>;
~~~
'sub' was also declared here.

../../../node_modules/@types/react/index.d.ts:2946:13 - error TS2717: Subsequent property declarations must have the same type. Property 'summary' must be of type 'DetailedHTMLProps<HTMLAttributes, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes, HTMLElement>'.

2946 summary: React.DetailedHTMLProps<React.HTMLAttributes, HTMLElement>;
~~~~~~~

../../../node_modules/@types/next-server/node_modules/@types/react/index.d.ts:2925:13
2925 summary: React.DetailedHTMLProps<React.HTMLAttributes, HTMLElement>;
~~~~~~~
'summary' was also declared here.

> Found 177 errors.

at makeError (D:\gitKBProject\kb680New319\kibana\node_modules\execa\index.js:174:9)
at Function.module.exports.sync (D:\gitKBProject\kb680New319\kibana\node_modules\execa\index.js:338:15)
at D:\gitKBProject\kb680New319\kibana\packages\kbn-plugin-helpers\tasks\build\create_build.js:145:13    at process._tickCallback (internal/process/next_tick.js:68:7)

error Command failed with exit code 1.
info Visit yarn run | Yarn for documentation about this command.

my .tgconfig file is of plugin as follows:-

{
// 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",
],
}

I have tried multiple things,
using kibana 6.8.0 , es 6.8.0

  1. yarn kbn bootstrap is going throw fine. = success.

  2. plugin working in development environment fine = success.

  3. yarn build fails,

  4. tried suggestion given in https://github.com/elastic/kibana/issues/28745

  5. suggestion given in "https://github.com/elastic/kibana/pull/26747" but with no success.

please help , because this is very import to me,

Thanks in advance.

2

there exist a lack of documentation for typescript custom plugins... please pay attention in this domain, because users wants to use typescript and geed community support...

3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.