# Customise Webpack Configs for Kibana (V8) Plugin development

**URL:** <https://discuss.elastic.co/t/customise-webpack-configs-for-kibana-v8-plugin-development/302542>\
**Category:** Kibana\
**Tags:** kibana-plugin-development\
**Created:** [April 16, 2022, 8:16am UTC](https://discuss.elastic.co/t/customise-webpack-configs-for-kibana-v8-plugin-development/302542 "2022-04-16T08:16:52Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![artalat](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/artalat/32/104436_2.png) [@artalat](https://discuss.elastic.co/u/artalat)\
**Post date:** [April 16, 2022, 8:16am UTC](https://discuss.elastic.co/t/customise-webpack-configs-for-kibana-v8-plugin-development/302542/1 "2022-04-16T08:16:52Z")

</div>

Hi, I'm developing a custom plugin for Kibana. The requirement is to share some code with React Native/Expo app. For this purpose, I need to customize webpack configs.

I found this existing thread [here](https://discuss.elastic.co/t/custom-webpack-settings-integration-with-kibana-plugin/195162) on the topic, but the API seems to be outdated.

Any help would be greatly appreciated.

---

<div class="post-metadata">

**Author:** ![Marius\_Dragomir](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marius_dragomir/32/42087_2.png) [@Marius\_Dragomir](https://discuss.elastic.co/u/Marius_Dragomir)\
**Post date:** [April 20, 2022, 4:54pm UTC](https://discuss.elastic.co/t/customise-webpack-configs-for-kibana-v8-plugin-development/302542/2 "2022-04-20T16:54:29Z")

</div>

@spalger can you take a look at this when you have some time?

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [April 20, 2022, 5:08pm UTC](https://discuss.elastic.co/t/customise-webpack-configs-for-kibana-v8-plugin-development/302542/3 "2022-04-20T17:08:05Z")

</div>

@artalat an you give us some more details about the problems you're having? I feel like your best bet is to move the code you want to share out of the React Native/Expo app and into a new module that you can import from both projects and supply compatible sources for your Kibana plugin.

---

<div class="post-metadata">

**Author:** ![artalat](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/artalat/32/104436_2.png) [@artalat](https://discuss.elastic.co/u/artalat)\
**Post date:** [April 20, 2022, 6:15pm UTC](https://discuss.elastic.co/t/customise-webpack-configs-for-kibana-v8-plugin-development/302542/4 "2022-04-20T18:15:24Z")

</div>

> [@artalat](#):
>
> Any

Thanks for the reply. The idea is to add alias to webpack configs.

Example:

```auto
// webpack.config.js
module.exports = {
  // ...the rest of your config

  resolve: {
    alias: {
      'react-native$': 'react-native-web'
    }
  }
}

```

The above example is oversimplification though. In my code, I would ideally need to have a function that takes the existing webpack config as input and returns a new one. In that case this would be my exact code:

```auto
const { resolve } = require("path");
const { withUnimodules } = require("@expo/webpack-config/addons");

module.exports = ({ config }) => {
  return withUnimodules(config, { projectRoot: resolve(__dirname, "../") });
};

```

So like I mentioned in my original post, the solution suggested by you [here](https://discuss.elastic.co/t/custom-webpack-settings-integration-with-kibana-plugin/195162/6) would be ideal. But it seems that API is now outdated?

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [April 20, 2022, 6:28pm UTC](https://discuss.elastic.co/t/customise-webpack-configs-for-kibana-v8-plugin-development/302542/5 "2022-04-20T18:28:21Z")

</div>

Yeah, our webpack config is much more standardized now as allowing people to customize it caused our Webpack build to become pretty unmaintainable... We'd need to add a pretty serious feature to the `@kbn/optimizer` to make this possible which is why I'm seeking another option.

---

<div class="post-metadata">

**Author:** ![artalat](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/artalat/32/104436_2.png) [@artalat](https://discuss.elastic.co/u/artalat)\
**Post date:** [April 20, 2022, 7:04pm UTC](https://discuss.elastic.co/t/customise-webpack-configs-for-kibana-v8-plugin-development/302542/6 "2022-04-20T19:04:18Z")

</div>

So there's no workaround available? This would be a big problem for us...

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [April 20, 2022, 7:20pm UTC](https://discuss.elastic.co/t/customise-webpack-configs-for-kibana-v8-plugin-development/302542/7 "2022-04-20T19:20:41Z")

</div>

Do you have control over the code which requires "react-native"? Could use use a babel plugin or something to transform the code to require `react-native-web` instead? Maybe they can provide a web-focused version of the package which applies this transformation so that consumers don't have to use custom webpack config to use their library?

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [April 20, 2022, 7:26pm UTC](https://discuss.elastic.co/t/customise-webpack-configs-for-kibana-v8-plugin-development/302542/8 "2022-04-20T19:26:02Z")

</div>

> So there's no workaround available?

There are plenty of workarounds available, Kibana just doesn't provide one specifically.

This feature was removed over two years ago and AFAIK hasn't been missed until now. If there is a solution that would be specific to your use case and not rely on the Kibana project maintaining features that are only used by one third-party plugin I think it would be the best.

---

<div class="post-metadata">

**Author:** ![artalat](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/artalat/32/104436_2.png) [@artalat](https://discuss.elastic.co/u/artalat)\
**Post date:** [April 25, 2022, 6:13am UTC](https://discuss.elastic.co/t/customise-webpack-configs-for-kibana-v8-plugin-development/302542/9 "2022-04-25T06:13:59Z")

</div>

Thanks for the feedback. I am exploring alternate solutions, but sadly have little control over the original code.

Meanwhile, if there is any way to achieve this from within kibana, I would be willing to explore it.

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [April 25, 2022, 1:30pm UTC](https://discuss.elastic.co/t/customise-webpack-configs-for-kibana-v8-plugin-development/302542/10 "2022-04-25T13:30:27Z")

</div>

I understand, I'm sure you'll find a way. If you have little control over the original code, it sounds feasible to implement a separate build process for your `react-native` based dependency for use in the web. That would be your best option, one where the transformation of `react-native` imports to `react-native-web` happens in the build process for the module you're consuming and is published in a sub-directory or separate package on NPM which you can consume instead of the react-native specific version.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [May 23, 2022, 1:31pm UTC](https://discuss.elastic.co/t/customise-webpack-configs-for-kibana-v8-plugin-development/302542/11 "2022-05-23T13:31:09Z")

</div>

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