Declaration files cannot be found when consuming nested input files

[sami616]

Hi, my rollup config looks like this:

import typescript from 'rollup-plugin-typescript2'
import rebasePlugin from 'rollup-plugin-rebase'
import pkg from './package.json'

export default {
  // Entry files
  input: {
    index: 'src/index.ts',
    Button: 'src/Button/index.ts',
    Spinner: 'src/Spinner/index.ts',
    Icon: 'src/Icon/index.ts',
    Note: 'src/Note/index.ts',
    Logo: 'src/Logo/index.ts',
    Card: 'src/Card/index.ts',
    Image: 'src/Image/index.ts',
    Modal: 'src/Modal/index.ts',
    Drawer: 'src/Drawer/index.ts',
    Tabs: 'src/Tabs/index.ts',
    Accordion: 'src/Accordion/index.ts',
    List: 'src/List/index.ts',
    Form: 'src/Form/index.ts',
    Transition: 'src/Transition/index.ts',
    Divider: 'src/Divider/index.ts',
    NewsletterForm: 'src/NewsletterForm/index.ts',

    // Layout
    Grid: 'src/Layout/Grid/index.ts',
    Container: 'src/Layout/Container/index.ts',

    // FormControls
    TextInput: 'src/FormControls/TextInput/index.ts',
    TextArea: 'src/FormControls/TextArea/index.ts',
    Select: 'src/FormControls/Select/index.ts',
    Stepper: 'src/FormControls/Stepper/index.ts',
    Checkbox: 'src/FormControls/Checkbox/index.ts',
    Radio: 'src/FormControls/Radio/index.ts',
    Toggle: 'src/FormControls/Toggle/index.ts',

    // Type
    P: 'src/Type/P/index.ts',
    H1: 'src/Type/H1/index.ts',
    H2: 'src/Type/H2/index.ts',
    H3: 'src/Type/H3/index.ts',
    H4: 'src/Type/H4/index.ts',
    Ol: 'src/Type/Ol/index.ts',
    Ul: 'src/Type/Ul/index.ts',
    Code: 'src/Type/Code/index.ts',
  },

  // Output as pure es modules into a lib folder, should probably add more output types at some point
  output: [
    {
      dir: 'lib',
      format: 'es',
    },
  ],
  // Exclude any dependancies in the bundle, these will auto install when the users adds this lib
  // Exclude any peerDepenacies, the consumer should install these themselves
  external: [
    ...Object.keys(pkg.dependencies || {}),
    ...Object.keys(pkg.peerDependencies || {}),
  ],
  plugins: [
    // Handle typescript
    typescript({
      typescript: require('typescript'),
      exclude: ['**/*.stories.tsx', 'node_modules'],
    }),
    // Handle all assets
    rebasePlugin(),
  ],
}

When consuming my package, importing components with the following syntax works fine:

import { Button } from '@mycomponents'

I have added multiple inputs for people to consume just the component they want. I have noticed that when consuming, this is working for all of my components except the nested ones. (eg all the inputs live in a folder called FormControls)

Works: import { Button } from '@mycomponents/lib/Button'
Doesn't work: import { TextInput } from '@mycomponents/lib/TextInput'

Is there a recommended way to do this?

[ezolenko]

Check if types are in the correct location in output and that any internal paths are correct. Maybe you are hitting #204? Although that one is for source maps.

[sami616]

Is there anyway to dump all of the d.ts files into one dir instead of recreating the project folder structure?

[ezolenko]

Dropping them into a flat file structure is not feasible because they might have name conflicts, also typescript generates internal imports based on file structure...

You could merge them into a single file. There are some tools that can take d.ts and merge them, or you could run tsc explicitly and use bundling options.

[agilgur5]

If I'm understanding this correctly, this is occurring because with multi-entry, Rollup outputs all the bundles into the same directory. Whereas rpt2 generates with the TS API which follows the input directory structure (not output directory structure).

So import { TextInput } from '@mycomponents/lib/TextInput' isn't getting the type declaration properly because it's in lib/FormControls/TextInput as that's how the input structure is, but the output structure is different.

A few different workarounds I could see for this:

1. using Rollup's preserveModules may get this to work out-of-the-box
2. adding "alias" stub files that just export the component in a different directory. that indirection should allow the types to work too.
3. declaration bundling with rollup-plugin-dts or something else as mentioned above

I'm not sure if there's a clean solution that can be implemented within rpt2 for this since TS isn't aware of this output structure. There might be though by playing around with some options; likely high complexity to solve if possible.

[agilgur5]

This seems to be a duplicate of #136 actually, which has a pretty big thread of workarounds. Closing as duplicate -- can continue discussions there.