eui dependency - highlight.js

[lior-fortifieddata]

hello

I'm using eui 20.1.0 for my react website (and love it!)

when analyzing my bundle, I've notices that highlight.js, which is eui dependency,is taking lots of it: (highlight.js "^9.12.0")

is there anyway to remove it from the bundle?
it seems to be in use in EuiCodeBlock but I dont use this component in my website.

thanks!

[chandlerprall]

Thanks for reporting! We are aware of this and better modularization is somewhat tracked on our roadmap.

I did confirm a few months ago that a properly configured webpack project will tree shake unused modules (off the top of my head that is ensuring es imports are used, production mode, and minification), though this can be cumbersome and error prone. Another option is to configure those modules you don't use as externals or otherwise disable, e.g. with webpack:

module.exports = {
  //...
  resolve: {
    alias: {
      'highlight.js': path.resolve(__dirname, './empty_mock.js')
    }
  }
};

or

module.exports = {
  // ...
  externals: {
    'highlight.js': 'noop'
  }
};

We would like to address this better in the future, but it's definitely a lower priority right now.

[snide]

Closing in favor of a better roadmap description #2520

[lior-fortifieddata]

i'll just update what I did as a future reference:

1. installed craco: https://github.com/gsoft-inc/craco
2. created craco.config.js with the following content:

module.exports = {
  webpack: {
    configure: webpackConfig => {
      webpackConfig.module.rules.push({
        test: /highlight\.js/, 
        use: "null-loader"
      })

      return webpackConfig
    }
  }
}

thanks!