So we're using the geist component library in our codebase. It's pretty much integrated into parts of our app and since this library is 250kb, it's impacting our page speed. To circumvent importing the entire module, the usual solution is just importing what you need and ideally, nothing should break and everything should work as expected.

import { CssBaseline } from "@npkn/geist-react"

Doing the above should work but adds 250kb to the bundle.

Another way to import a component would be to import the specific file. I get two options to import the component from either ESM or dist modules

import CssBaseline from "@npkn/geist-react/dist/css-baseline"

and

import CssBaseline from "@npkn/geist-react/esm/css-baseline/index"

I've tried doing both of these but webpack throws errors. I've tried importing named exports as well but even then it throws an error.

TypeError: _npkn_geist_react_dist_css_baseline__WEBPACK_IMPORTED_MODULE_0___default(...).flush is not a function
   9 |   static async getInitialProps(ctx) {
  10 |     const initialProps = await Document.getInitialProps(ctx)
> 11 |     const styles = CssBaseline.flush()
     |                   ^
  12 | 
  13 |     return {
  14 |       ...initialProps,

My question is am I doing the imports right or is there something I'm missing?

Thank you!