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

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.

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...

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