Why do my TypeScript generated sourcemaps reference the src folder instead of the dist folder?

I'm building a package for a simple React component to facilitate code reuse by myself and others.

I followed an older Rollup tutorial and managed to get the package functioning, but when the package is added to another project, the following warning appears when the project starts:

BASHCopied
WARNING in ./node_modules/[package]/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '[app dir]\node_modules\[package]\src\components\PieChart\PieChart.component.tsx' file: Error: ENOENT: no such file or directory, open '[app dir]\node_modules\[package]\src\components\PieChart\PieChart.component.tsx'

Although Rollup outputs files in the dist folder correctly, the generated .map files still reference the src directory. I suspect this might be a TypeScript configuration issue rather than a Rollup problem.

Below are my TypeScript and Rollup configurations for further context:

tsconfig.json:

JSONCopied
{
  "compilerOptions": {
    "target": "ESNext",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "jsx": "react-jsx",                                /* Specify what JSX code is generated. */
    "rootDir": "./",                                  /* Specify the root folder within your source files. */
    "moduleResolution": "node",                     /* Specify how TypeScript looks up a file from a given module specifier. */
    "allowJs": false,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
    "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
    "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
    "sourceMap": true,
    "outDir": "dist",                                   /* Specify an output folder for all emitted files. */
    "declarationDir": "types",                           /* Specify the output directory for generated declaration files. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
    "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
    "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
    "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
    "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
    "allowUnreachableCode": false,                     /* Disable error reporting for unreachable code. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

rollup.config.mjs

JAVASCRIPTCopied
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import packageJson from "./package.json" assert { type: "json" };

export default [
  {
    preserveModules: true,
    input: "src/index.ts",
    output: [
      {
        dir: "dist/esm/",
        format: "esm",
        sourcemap: true,
      }
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({
        tsconfig: "./tsconfig.json",
        compilerOptions: {
          outDir: "dist/esm/",
          declarationDir: "dist/esm/types"
         }
      }),
    ],
  },
  {
    input: "dist/esm/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
  },
];

rollup.config.cjs

JAVASCRIPTCopied
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import packageJson from "./package.json" assert { type: "json" };

export default [
  {
    preserveModules: true,
    input: "src/index.ts",
    output: [
      {
        dir: "dist/cjs/",
        format: "cjs",
        sourcemap: true,
      }
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({
        tsconfig: "./tsconfig.json",
        compilerOptions: {
          outDir: "dist/cjs/",
          declarationDir: "dist/cjs/types"
         }
      }),
    ],
  },
  {
    input: "dist/esm/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
  },
];

I am looking for guidance on whether this issue is due to my TypeScript configuration and how best to resolve it.