# Building plugin in Kibana 7.8.0

**URL:** <https://discuss.elastic.co/t/building-plugin-in-kibana-7-8-0/259981>\
**Category:** Kibana\
**Created:** [January 1, 2021, 1:52am UTC](https://discuss.elastic.co/t/building-plugin-in-kibana-7-8-0/259981 "2021-01-01T01:52:47Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![ssimmons](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@ssimmons](https://discuss.elastic.co/u/ssimmons)\
**Post date:** [January 1, 2021, 1:52am UTC](https://discuss.elastic.co/t/building-plugin-in-kibana-7-8-0/259981/1 "2021-01-01T01:52:47Z")

</div>

I've built my own plugin in Kibana 7.8.0. I'm now trying to do a `yarn build` command to build the plugin so I can install it on our dev server. I created the plugin using the `node scripts/generate-plugin` command. However, this script does not create a package.json file. I've done these same steps in Kibana 7.5 and it does create the `package.json` file will all the dependences like it does in Kibana 7.5. Is this something that 7.8 does not do? I'm assuming I need a `package.json` file for the `yarn build` command to work because it currently tries to build all of Kibana when I run that command. I found another forum post discussing a bug in Kibana 7.8 when trying to build a plugin:

[https://discuss.elastic.co/t/problem-with-build-dev-kibana-plugin-in-7-8/247046](https://discuss.elastic.co/t/problem-with-build-dev-kibana-plugin-in-7-8/247046)

They state to add some things to the `package.json` file but I don't have a package.json file when generating my plugin. Should I?

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [January 1, 2021, 9:23pm UTC](https://discuss.elastic.co/t/building-plugin-in-kibana-7-8-0/259981/2 "2021-01-01T21:23:58Z")

</div>

Upgrading to 7.10 an option? This will fix your build issues.

Well in 7.10 the plugin generator creates the `package.json` for you and also the build process works better.

---

<div class="post-metadata">

**Author:** ![ssimmons](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@ssimmons](https://discuss.elastic.co/u/ssimmons)\
**Post date:** [January 2, 2021, 9:03pm UTC](https://discuss.elastic.co/t/building-plugin-in-kibana-7-8-0/259981/3 "2021-01-02T21:03:22Z")

</div>

Unfortunately I cannot upgrade to 7.10 as the production server is a government server and our contract with them requires Kibana 7.8. I'm currently running the Kibana development environment in a Docker container. I'm using the Kibana git repo ([https://github.com/elastic/kibana.git](https://github.com/elastic/kibana.git)) and checking out branch 7.8.0. Is there another branch I can switch to for 7.8 that has the fix for the `generate_plugin` script? One that will still allow my plugin to run on version 7.8.0 Kibana? Or can I run the `generate_plugin` script for 7.10 on 7.8?

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [January 3, 2021, 2:10am UTC](https://discuss.elastic.co/t/building-plugin-in-kibana-7-8-0/259981/4 "2021-01-03T02:10:42Z")

</div>

If I had to try this I would install 7.10 somewhere and generate a plugin that targets 7.8 and then do your `yarn build` when done on the 7.10 version (build process works in 7.10 flawlessly). After that you install it on your production server for 7.10.

You can get this to work with 7.8 just so you know. It just requires digging into GitHub issues and doing all the workarounds. Hope this helps.

---

<div class="post-metadata">

**Author:** ![ssimmons](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@ssimmons](https://discuss.elastic.co/u/ssimmons)\
**Post date:** [January 3, 2021, 3:24am UTC](https://discuss.elastic.co/t/building-plugin-in-kibana-7-8-0/259981/5 "2021-01-03T03:24:41Z")

</div>

Thanks. I'll try that route and see if the plugin works on the 7.8 production server.

---

<div class="post-metadata">

**Author:** ![ssimmons](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@ssimmons](https://discuss.elastic.co/u/ssimmons)\
**Post date:** [January 4, 2021, 2:53pm UTC](https://discuss.elastic.co/t/building-plugin-in-kibana-7-8-0/259981/6 "2021-01-04T14:53:45Z")

</div>

I was able to install Kibana 7.10 and created a test plugin. However, it appears the `generate-plugin.js` script in Kibana 7.10 does not ask which version of Kibana you want to target. So I'm not seeing how to target Kibana 7.8 from Kibana 7.10 plugin generation. I guess I'll have to try to get this to work in 7.8. Since 7.8.0 does not create a `package.json` file, is there a standard one I can use for 7.8.0 that I can modify with the proper build dependences? I have Kibana 7.5 installed but I'm not sure a 7.5 `package.json` file will work in 7.8. Or is there a version of 7.8 I can install that does create a `package.json` file that I can then modify? This is all pretty frustrating.

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [January 4, 2021, 5:58pm UTC](https://discuss.elastic.co/t/building-plugin-in-kibana-7-8-0/259981/7 "2021-01-04T17:58:25Z")

</div>

kibana.json

```auto
{
  "id": "brewAnalytics",
  "version": "1.0.0",
  "kibanaVersion": "kibana", <----- Change to 7.8
  "server": true,
  "ui": true,
  "requiredPlugins": ["navigation"],
  "optionalPlugins": ["security"]
}

```

I haven't fully test that but it will create a plugin called name.7.8.zip which should work. I am testing this today also but I think this should work.

---

<div class="post-metadata">

**Author:** ![ssimmons](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@ssimmons](https://discuss.elastic.co/u/ssimmons)\
**Post date:** [January 4, 2021, 7:46pm UTC](https://discuss.elastic.co/t/building-plugin-in-kibana-7-8-0/259981/8 "2021-01-04T19:46:42Z")

</div>

I don't think that will work. I created a test plugin in Kibana 7.10 and then modified the `kibana.json` file to set the "kibanaVersion" to "7.8.0". I then ran `yarn build` from the test plugin directory and got this error:  
`ERROR These tools are not designed to work with version before 7.9, please checkout an earlier version of Kibana to build your plugin`

---

<div class="post-metadata">

**Author:** ![ssimmons](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@ssimmons](https://discuss.elastic.co/u/ssimmons)\
**Post date:** [January 4, 2021, 10:01pm UTC](https://discuss.elastic.co/t/building-plugin-in-kibana-7-8-0/259981/9 "2021-01-04T22:01:39Z")

</div>

I'm trying to get this working in 7.8 with the work arounds provided in github. I've been able to create a `package.json` file that contains:

```auto
{
   "name": "test_plugin",
   "version": "0.0.0",
   "description": "Test Plugin",
   "kibana": {
      "version": "7.8.0"
   },
   "scripts": {
      "build": "plugin-helpers build"
   },
   "devDependencies": {
      "@kbn/plugin-helpers": "link:../../packages/kbn-plugin-helpers"
   }
}

```

And a `.kibana-plugin-helpers.json` that contains:

```auto
{
   "buildSourcePatterns": [
     "package.json",
     "yarn.lock",
     "{public,server}/**/*",
     "kibana.json"
   ]
 }

```

I can then do a `yarn build` but this will not work once installed on the dev sever because the bundles have not been built for it. According to github ([https://github.com/elastic/kibana/issues/70426](https://github.com/elastic/kibana/issues/70426)) I need to manually run the optimizer and include the generated files in the plugin by running the following commands:

```auto
mkdir -p kibana/plugin_name/target/public
node ../../scripts/build_kibana_platform_plugins --verbose --no-examples
mv target/public/* kibana/plugin_name/target/public/
zip -ur build/plugin_name-*.zip kibana/plugin_name/target/public

```

When I run the following command `node ../../scripts/build_kibana_platform_plugins --verbose --no-examples` from my test plugin directory I get the following error message:

```auto
ERROR in ../maps/public/index.scss?dark (/kibana/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-0-1!/kibana/node_modules/postcss-loader/src??ref--5-oneOf-0-2!/kibana/node_modules/resolve-url-loader??ref--5-oneOf-0-3!/kibana/node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-0-4!../maps/public/index.scss?dark)
       │ Module build failed (from /kibana/node_modules/sass-loader/dist/cjs.js):
       │ SassError: File to import not found or unreadable: src/legacy/ui/public/styles/_styling_constants.
       │ on line 6 of /kibana/x-pack/plugins/maps/public/index.scss
       │ >> @import 'src/legacy/ui/public/styles/_styling_constants';

```

Any suggestions on how to correct this SassError? It says it's a webpack issue.

\*\*\* Update \*\*\*

I was able to fix this error by modifying the `/kibana/node_modules/sass-loader/dist/getSassOptions.js` file. Changing this line:

```auto
options.includePaths = (options.includePaths || []).concat(_path.default.dirname(resourcePath));

```

to this:

```auto
options.includePaths = (options.includePaths || []).concat(_path.default.dirname(resourcePath)).concat('/kibana');

```

---

<div class="post-metadata">

**Author:** ![ssimmons](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@ssimmons](https://discuss.elastic.co/u/ssimmons)\
**Post date:** [January 4, 2021, 11:59pm UTC](https://discuss.elastic.co/t/building-plugin-in-kibana-7-8-0/259981/10 "2021-01-04T23:59:38Z")

</div>

I'm now getting errors when it's trying to optimize the uuid node module. Here's the error:

```auto
ERROR in ./node_modules/uuid/dist/parse.js
       │ Module parse failed: disallowed syntax found in file /kibana/plugins/custom_filter_bar/node_modules/uuid/dist/parse.js:
       │ - [es2015] let/const variable declaration
       │ You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
       │ Error: disallowed syntax found in file /kibana/plugins/custom_filter_bar/node_modules/uuid/dist/parse.js:
       │ - [es2015] let/const variable declaration
       │ at parser.hooks.program.tap.program (/kibana/packages/kbn-optimizer/src/common/disallowed_syntax_plugin/disallowed_syntax_plugin.ts:64:17)
       │ at SyncBailHook.eval (eval at create (/kibana/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)
       │ at Parser.parse (/kibana/node_modules/webpack/lib/Parser.js:2280:26)
       │ at doBuild.err (/kibana/node_modules/webpack/lib/NormalModule.js:482:32)
       │ at runLoaders (/kibana/node_modules/webpack/lib/NormalModule.js:358:12)
       │ at /kibana/node_modules/loader-runner/lib/LoaderRunner.js:373:3
       │ at iterateNormalLoaders (/kibana/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
       │ at Array.<anonymous> (/kibana/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
       │ at Storage.finished (/kibana/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
       │ at provider (/kibana/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
       │ at /kibana/node_modules/graceful-fs/graceful-fs.js:115:16
       │ at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)
       │ @ ./node_modules/uuid/dist/index.js 77:36-57
       │ @ ./public/components/editor.js
       │ @ ./public/custom_filter_bar_vis_type.tsx
       │ @ ./public/plugin.ts
       │ @ ./public/index.ts

```

I'm assuming this may be babel related since my Kibana 7.5 `package.json` file has babel `devDependencies` included in it. What `devDependencies` do I need to include in my `package.json` file for 7.8 to work with javascript let/const variables?

Here's the different scripts and dependency objects in my Kibana 7.5 `package.json` file. Which one's should I include in my 7.8 package.json file for the optimizer to work?

```auto
{
  "name": "custom_filter_bar",
  "version": "1.0.0",
  "description": "Allows user to create custom filters displayed in a filter bar",
  "main": "index.js",
  "kibana": {
    "version": "7.5.0",
    "templateVersion": "1.0.0"
  },
  "scripts": {
    "preinstall": "node ../../preinstall_check",
    "kbn": "node ../../scripts/kbn",
    "es": "node ../../scripts/es",
    "lint": "eslint .",
    "start": "plugin-helpers start",
    "test:server": "plugin-helpers test:server",
    "test:browser": "plugin-helpers test:browser",
    "build": "plugin-helpers build"
  },
  "devDependencies": {
    "@elastic/eslint-config-kibana": "link:../../packages/eslint-config-kibana",
    "@elastic/eslint-import-resolver-kibana": "link:../../packages/kbn-eslint-import-resolver-kibana",
    "@kbn/expect": "link:../../packages/kbn-expect",
    "@kbn/plugin-helpers": "link:../../packages/kbn-plugin-helpers",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jest": "^22.4.1",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-mocha": "^5.3.0",
    "eslint-plugin-no-unsanitized": "^3.0.2",
    "eslint-plugin-prefer-object-spread": "^1.2.1",
    "eslint-plugin-react": "^7.12.4"
  },
  "dependencies": {
    "lodash": "^4.17.20",
    "uuid": "^8.3.1"
  }
}

```

---

<div class="post-metadata">

**Author:** ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)\
**Post date:** [January 5, 2021, 1:19am UTC](https://discuss.elastic.co/t/building-plugin-in-kibana-7-8-0/259981/11 "2021-01-05T01:19:21Z")

</div>

I don't think I'll be able to assist with this any further. Believe you are about the same step I was went attempting this. Past my abilities. 🙂

I'd recommend making a new topic with the exact issue you are currently facing and maybe one of our developers will jump in.

---

<div class="post-metadata">

**Author:** ![rudolf](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rudolf/32/51200_2.png) [@rudolf](https://discuss.elastic.co/u/rudolf)\
**Post date:** [January 11, 2021, 12:08pm UTC](https://discuss.elastic.co/t/building-plugin-in-kibana-7-8-0/259981/12 "2021-01-11T12:08:46Z")

</div>

Closing in favour of [Installing plugin in Kibana 7.8](https://discuss.elastic.co/t/installing-plugin-in-kibana-7-8/260155/3)

---

<div class="post-metadata">

**Author:** ![rudolf](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rudolf/32/51200_2.png) [@rudolf](https://discuss.elastic.co/u/rudolf)\
**Post date:** [January 11, 2021, 12:08pm UTC](https://discuss.elastic.co/t/building-plugin-in-kibana-7-8-0/259981/13 "2021-01-11T12:08:48Z")

</div>