Rollup and typescript bundle is without editor code completion and jump to declaration

Question

Very new to bundling. My team is used to code completion and being able to jump to the type declaration file of a corresponding component using command + click in their editor (VSCode).

However the bundle generated does not come with this behaviour... I don't know how to go form here, or what I am missing. These feature are very important to my team. Any help is appreciated 🙏

Versions

• typescript: 3.7.5
• rollup: 1.31.0
• rollup-plugin-typescript2: 0.26.0

rollup.config.js

import babel from 'rollup-plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import svgr from '@svgr/rollup';
import url from '@rollup/plugin-url';
import json from '@rollup/plugin-json';
import external from 'rollup-plugin-peer-deps-external';
import includePaths from 'rollup-plugin-includepaths';

const pkg = require('./package.json');

export default {
  cache: false,
  input: 'src/index.ts',
  output: { file: pkg.module, format: 'esm' },
  plugins: [
    external({
      preferBuiltins: false,
    }),
    babel({
      exclude: /node_modules/,
      plugins: ['external-helpers'],
      externalHelpers: true, 
    }),
    json(),
    resolve(),
    svgr({
      ref: true,
      svgo: false,
    }),
    typescript({
      clean: true,
      typescript: require('typescript'),
    }),
    url(),
    includePaths({
      paths: ['src'],
    }),
    commonjs({
      namedExports: {
        'prop-types': [
          'oneOfType',
          'func',
          'shape',
          'any',
          'number',
          'object',
          'bool',
          'string',
        ],
      },
    }),
  ],
};

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "es6",
    "moduleResolution": "node",
    "noEmit": true,
    "noErrorTruncation": true,
    "outDir": "./dist",
    "skipLibCheck": true,
    "strict": true,
    "target": "es5",
    "rootDir": "src"
  },
  "include": ["src"],
  "exclude": ["storybook", "dist"]
}

package.json

Relevant bits only 👇

{
  "main": "dist/index.js",
  "module": "dist/index.js",
  "typings": "dist/index.d.ts",
}

Answer 1

Found the issue - it was because I was using absolute paths. Changing import paths to relative imports or using a plugin to convert absolute to relative import paths when building fixes this issue.