Aradiel
Aradiel

Reputation: 33

Why is my Typescript module mapping to src rather than dist?

I'm trying to create a package for an extremely simple React component so that I (and others) can re-use it.

To create it I followed a very out of date Rollup tutorial, but I managed to get the package working functionally.

The problem is that, when it is added to another project and that project is started, I get this error in the command line:

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'

Obviously Rollup is correctly rolling up the output dist folder for the package, but for some reason the .map files are referencing the src folder instead

Is this a Typescript configuration issue or a Rollup one, and how can I resolve it?

tsconfig.json:

{
  "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

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

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()],
  },
];

Upvotes: 1

Views: 42

Answers (0)

Related Questions