Custom Webpack settings integration with kibana plugin

[pradeep_c8 (Pradeep Kumar)]

Hi,

Am trying to merge my react application with kibana plugin, In my react application I used webpack server and webpack configurations, I used alias to refer my files, I need those configs to be inserted with kibana plugin.

But kibana not accepting my webpack configs. It will be good to get suggestion from you guys to import custom webpack configuration for kibana-plugin

[spalger (Spencer Alger)]

Hey @pradeep_c8

I'd suggest looking into babel plugins that you can use to rewrite babel imports before packaging your plugin in the future, or using a code shift to rewrite your imports to relative paths.

Customizing the webpack aliases Kibana exposes isn't recommended, and could break any time, but for now you can define uiExports.__globalImportAliases__ in your plugin to define aliases that will be merged into the Kibana webpack config.

Good luck!

[pradeep_c8 (Pradeep Kumar)]

Hi @spalger,

Thanks for your suggestion UIExports.globalImportAliases works fantastic, Now i can able to use alias throughout the project.

One thing is not getting resolved:

I uses scss styles throughout the application in almost every file. Am getting the below error

Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

On compiling the source. Any idea to get rid of this?

[spalger (Spencer Alger)]

@pradeep_c8 Hmm, well, that sounds a lot like webpack trying load a file type it doesn’t understand.

Are you importing the sass files?

You’ll need to import the css instead.

Can you share additional info or maybe a like to code on Github?

[pradeep_c8 (Pradeep Kumar)]

@spalger, Sorry for the long time.

importing css, is too difficult. Since am just referring the react components from other projects inorder to reduce code duplication. They used scss file in every component, changing all the component makes very huge process, they are not recommending that.

Meanwhile, I have just created a sample project. please check the repo below to get an idea about my problem

https://github.com/pradeepravi-cse/kibana-sass-import-plugin

[spalger (Spencer Alger)]

Okay, well in order to support importing scss files in Kibana you're going to have to get a little creative. What you can do is modify the webpack config directly from your plugin with something like this:

uiExports: {
  __bundleProvider__(kbnServer) {
    const defaultGetExtendedConfig = kbnServer.uiBundles.getExtendedConfig;

    kbnServer.uiBundles.getExtendedConfig = (webpackConfig) => {
      webpackConfig.module.rules.push({
        test: /\.scss$/,
        loader: require.resolve('sass-loader') // make sure to install in your plugin
      })

      return defaultGetExtendedConfig.call(kbnServer.uiBundles, webpackConfig);
    };
  }
}

I hope it goes without saying, that this is also very unsupported and might not be possible after some time.

Going forward you're probably going to want to setup your own webpack configuration and prebuild the code for your plugin, then setup Kibana to optimize with the built version of your plugin, rather than trying to optimize the raw source of your plugin.

[pradeep_c8 (Pradeep Kumar)]

@splager

Thanks for the updated. I have installed the sass-loader and inserted the code as you told above. But still, am facing the issue but with a tiny difference.

previously it shows
You may need an appropriate loader to handle this file type.

But now it showing like

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

And i forgot to mention a thing. Am using kibana v6.8.2. I Assume the above method will work with 7.0 or later version. Correct me if am wrong

[spalger (Spencer Alger)]

Can you share the complete error message from the console?

Is it failing for the same file?

If you put a console.log() in the __bundleProvider__ function does it execute?

[pradeep_c8 (Pradeep Kumar)]

Yes the function gets executed and i can see the console.log aswell

[spalger (Spencer Alger)]

Okay, perhaps you just need the more complete config from https://github.com/webpack-contrib/sass-loader

{
  test: /\.scss$/i,
  use: [
    // Creates `style` nodes from JS strings
    'style-loader',
    // Translates CSS into CommonJS
    'css-loader',
    // Compiles Sass to CSS
    'sass-loader',
  ],
},