Reputation: 33
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