How to include external interfaces with rollup?

Viewed 118

We are using rollup to build our company's internal ui lib.

We are using @mui as one of the dependencies, we are theming it in our ui and reexporting the entire package:

This is the index.ts file at the root of the ui lib package.

export * from '@mui/material';
export * as FormikMui from 'formik-mui';
export * from './components';

In our React packages, we are only installing our ui lib, not @mui or other dependencies (this is a requirement). The approach works fine, we can import Grid from our ui lib and it's the @mui Grid component. The problem here is that the types and interfaces from the external packages (in this case @mui) are not bundled together with our ui lib (so we don't have the Grid interface from @mui). The built index.d.ts looks like this:

export * from '@mui/material';
export * as FormikMui from 'formik-mui';
export * from './components';

The problem is that it references packages that are not installed by our React applications. We need to reexport the interfaces from the external dependencies as well, so instead of referencing directly the @mui package (which is not installed), we need to reference a bundled file.

Our rollup config is:

inputOptions: {
      input: path.join('src', relativeEntryPath),
      plugins: [
        peerDepsExternal(),
        nodeResolve(),
        typescript(),
        svgr(svgrConfig),
        commonjs(),
        includePaths({
          include: {},
          paths: ['src/old'],
          extensions: ['.js', '.ts', '.tsx'],
          external: [],
        }),
        babel({ exclude: 'node-modules/**', babelHelpers: 'bundled' }),
      ],
    },

How should we export the interfaces as well? Should we move away from rollup and use another bundler?

Thanks in advance!

0 Answers
Related