Search code examples
reactjsnpmrolluprollupjs

Rollup compiling module typescript declarations and javascript files separately

Rollup is compiling the module declarations in a separate area while javascript is kept in another area in npm package.

rollup.config.js

import Ts from 'rollup-plugin-typescript2';
import image from '@rollup/plugin-image';

export default {
  input: [
    'src/index.ts',
    'src/atoms/Button/index.ts',
  ],
  output: {
    dir: 'lib',
    format: 'esm',
    sourcemap: true,
  },
  plugins: [Ts(), image()],
  preserveModules: true,
  external: [
    'react',
  ],
};

When bundled the lib folder looks like this

lib
|__atoms
|____Button
|______Button.d.ts
|______index.d.ts
|__packages
|____react
|______src
|________atoms
|__________Button
|____________Button.js
|____________Button.js.map
|____________index.js
|____________index.js.map

As you can see in the button example, I need these to be together in one file because when I attempt to import this file in another repository..

the error generated is..

Could not find a declaration file for module

If the <PACKAGE> package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module

Please let me know if there is more items needed to answer this question.

Solution

  • Okay, after some deep digging.. The issue was related to not adding a package as an external dependency. When it wasn't included, rollup would create a bundled node_modules folder with the packages that weren't being added into the external config and attempt to create a directory on top of that using that bundled javascript.

    Output structure

    lib
|__node_modules
|____<PACKAGE_BEING_USED_IN_FILES>

    rollup.config.js

    external: [
  'react',
  '<PACKAGE_BEING_USED_IN_FILES>',
],

    By correctly adding in all my external dependencies. I was able to resolve this error.

    The tricky part to this was rollup, didn't give a warning about this particular dependency.. which kinda through me in a loop.