Customise Webpack Configs for Kibana (V8) Plugin development

Elastic Stack Kibana
1

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 on the topic, but the API seems to be outdated.

Any help would be greatly appreciated.

2

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

3

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

4

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

Example:

// 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:

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 would be ideal. But it seems that API is now outdated?

5

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.

6

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

7

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?

8

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.

9

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.

10

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.

11

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