Issue with Custom Plugin Causing "Elastic did not load properly"

Elastic Stack Kibana
1

Issue with Custom Plugin Causing "Elastic did not load properly" Error in Kibana 8.14.0

Hi everyone,

Greetings of the day!

I have successfully cloned the Kibana repository and set up everything for local development. When using a snapshot of Elasticsearch, everything works fine. Here’s a brief overview of my setup process:

  1. Cloned the Kibana repository using:

git clone --depth 1 --branch v8.14.0 GitHub - elastic/kibana: Your window into the Elastic Stack kibana8.14.0

  1. Ran the following commands:

yarn kbn bootstrap
yarn es snapshot --license trial
yarn start

At this point, everything works perfectly. I can log in to Kibana and browse the Kibana UI without any issues.

However, the problem arises when I create a custom plugin. Here are the steps I follow to create the plugin:

  1. Generate the custom plugin using:

node scripts/generate_plugin

  1. Navigate to the plugin folder and build the plugin:

cd plugins/my_custom_plugin
yarn build

  1. Clean and bootstrap Kibana again:

yarn kbn clean
yarn kbn bootstrap

After these steps, the login page shows up, but upon logging in, I encounter the error: "Elastic did not load properly. Check the server output for more information."

In kibana server output it shows:

[2024-06-19T09:55:29.579+02:00][INFO ][plugins.security.authentication] Login attempt with "basic" provider succeeded (requires redirect: true).

That means login is successful but after login I am getting "Elastic did not load properly. Check the server output for more information."

If I delete the custom plugin and run yarn kbn bootstrap again, everything works fine. It seems the issue is directly related to the custom plugin.

One common warning I am getting on the kibana console:

[2024-06-19T09:54:50.094+02:00][WARN ][http.server.Kibana] Event loop utilization for /zzq/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js exceeded threshold of 250ms (510ms out of 1161ms) and 15% (44%)

It is showing without plugin and also with custom plugin, so I think this is the not the problem.

Has anyone else faced a similar issue or have any suggestions on how to resolve this? Any help would be greatly appreciated!

Thank you!

2

Hi @Antim_K,

Can you check your Chrome DevTools console to see what errors are there? That would give you more of a clue.

Are you building a UI plugin or server plugin? Looking at the steps you've specified one step I see missing is running the plugin itself. If you see a 404 error similar to the below that could be the reason:

GET http://localhost:5601/XXXXXXXXXXXX/bundles/plugin/kibanaExamplePlugin/1.0.0/kibanaExamplePlugin.plugin.js 404 (Not Found)

kibanaExamplePlugin:1 Refused to execute script from 'http://localhost:5601/XXXXXXXXXXXX/bundles/plugin/kibanaExamplePlugin/1.0.0/kibanaExamplePlugin.plugin.js' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

If that's not the issue please share the Chrome DevTools console error. That would be the best way to identify what is wrong with your plugin.

Hope that helps!

1 Like
3

I was missing the plugin running step. My plugins were developed in Kibana version 8.6.0, and in that version, the plugin running step (yarn dev --watch) was not necessary. As soon as I ran yarn kbn bootstrap and then yarn start, all the custom plugins under the plugin folders were automatically running with Kibana. However, it seems that now I have to do this extra step to run the plugins.

Additionally, I noticed that in the plugins' package.json files generated by the plugin tool in version 8.14.1, there are some extra scripts that were missing in my plugins developed in version 8.6.0.

For example, here is a sample package.json from my plugins developed in 8.6.0:

{
  "name": "mapping",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "yarn plugin-helpers build",
    "plugin-helpers": "node ../../scripts/plugin_helpers",
    "kbn": "node ../../scripts/kbn",
    "lint": "eslint '**/*.tsx'"
  }
}

I created a sample test plugin in version 8.14.1, and its package.json file is:

{
  "name": "test",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "bootstrap": "yarn kbn bootstrap && yarn install",
    "build": "yarn plugin-helpers build",
    "dev": "yarn plugin-helpers dev",
    "plugin-helpers": "node ../../scripts/plugin_helpers",
    "kbn": "node ../../scripts/kbn"
  }
}

Some scripts are missing in my plugins package.json file, and as soon as I add them manually, my plugins work. There should be a proper migration guideline for custom plugin development. Thanks again for the reply.