title: How to debug a Typescript library compiled with Rollup in a main project
body: <p>I've been spending some time trying to figure out the follow scenario:</p>
  <p>I got two projects, one is a library of components and the other one the main project which consumes the library. When I develop a new component I do as usual following a TDD process and at the end I do some case scenarios on storybook that I expect the component will behave under certain circumstances, however, one thing is the desirable behaviour and the other how will be the functionality in a real integration environment. For this case I've been trying to build the source maps for the library in order to debug it locally when its running on the main project.</p>
  <p>The library is developed with typescript so I'm compiling it with rollup using the follow configuration:</p>
  <p><strong>rollup.config.js</strong></p>
  <pre><code>import peerDepsExternal from &quot;rollup-plugin-peer-deps-external&quot;;
  import resolve from &quot;@rollup/plugin-node-resolve&quot;;
  import commonjs from &quot;@rollup/plugin-commonjs&quot;;
  import typescript from &quot;rollup-plugin-typescript2&quot;;
  import postcss from &quot;rollup-plugin-postcss&quot;;
  import image from &quot;@rollup/plugin-image&quot;;
  import babel from &quot;rollup-plugin-babel&quot;;
  const cssUrl = require(&quot;postcss-url&quot;);
  
  const packageJson = require(&quot;./package.json&quot;);
  
  const GLOBALS = {
    react: &quot;React&quot;,
    &quot;react-dom&quot;: &quot;ReactDOM&quot;,
    loadash: &quot;lodash&quot;
  };
  
  const isDev = process.env.NODE_ENV === &quot;development&quot;;
  
  export default {
    input: &quot;src/index.ts&quot;,
    external: Object.keys(GLOBALS),
    output: [
      {
        file: packageJson.main,
        format: &quot;cjs&quot;,
        sourcemap: true,
        // globals: global variable names of external dependencies
        globals: GLOBALS
      },
      {
        file: packageJson.module,
        format: &quot;esm&quot;,
        sourcemap: true,
        // globals: global variable names of external dependencies
        globals: GLOBALS
      }
    ],
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs(),
      babel({
        exclude: &quot;node_modules/**&quot;,
        plugins: [&quot;external-helpers&quot;]
      }),
      typescript({ useTsconfigDeclarationDir: true }),
      postcss({
        modules: false,
        extract: true,
        sourceMap: true,
        minimize: isDev ? false : true,
        plugins: [cssUrl({ url: &quot;inline&quot; })]
      }),
      image()
    ]
  };
  
  </code></pre>
  <p>When I execute <code>npm run build</code> it generates both compiled bundles for ESM and CommonJS and I can debug directly through the **index.esm.js&quot; file directly but as a compiled version of the code is generated, it's harder to debug it setting the breakpoints and doing the inspection with a version of the code ugly and minified so I was wondering if I can take advantage of source maps files for this matter. For the root project it works like a charm but when it comes to use it within a generated code for the library I was not able to make it.</p>
  <p>This is the <strong>dist</strong> folder generated:</p>
  <p><a href="https://i.stack.imgur.com/goOQq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/goOQq.png" alt="enter image description here" /></a></p>
  <p>The <strong>index.esm.js</strong> file has all the code compiled for every single component and at the bottom the follow line:</p>
  <pre><code>//# sourceMappingURL=index.esm.js.map
  
  </code></pre>
  <p>Pointing out that the sourcemapping corresponds to the <code>index.esm.js.map</code>. Within this file there are an array of mapping source files pointing to the many components inside the library, all of them prefixing with <code>../src/elements/&lt;component_name&gt;</code> so as long as the files are set up on the relative map of <code>index.esm.js.map</code> that is <code>node_modules/library-components/src/elements/...</code> the browser should be able to map correctly these files but this is not the case since every time I launch the app this is what I see on the sources tab:</p>
  <p><a href="https://i.stack.imgur.com/RWZ09.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RWZ09.png" alt="enter image description here" /></a></p>
  <p>So neither src folder with the mapping source files or any source files corresponding with the library are available on the sources tab but I can see that the browser is able to detect the source map file for the <code>index.esm.js</code> that is pointing to the existing <code>index.esm.js.map</code> that we described but that's not what I really want to but the source maps mapping to every each component as I stated before. So my question is, it's possible to compile with rollup generating a bundle with the source maps for every component in a legible way in order to debug the components more easily and be the browser able to detect them instead of using the existing <code>index.esm.js</code>?</p>
  <p>I was trying to perform several workflows with no success like running the tsc compiler that generates the source maps for every component but the problem is that in the process I need to generate also the bundles for the assets that rollup do using <code>postcss</code> and <code>images</code> for that purpose, otherwise I cannot launch the perform since the main app is not able to map correctly the asset files.</p>
  <p>I don't know if at the end I explain myself very well in this topic but I think it's a pretty common scenario for those who works with several project instead of a monorepo and need continuously test and seek for potential errors in an integration env for the components inside of a third-party library.</p>
  <p>Anyone that can throw some light on this topic?</p>
  <p>Thanks in advance!</p>