Updated answer:
I solved this issue (amongst others), by installing an npm package called 'rollup-plugin-sourcemaps' and having sourcemaps() inside my plugins array. It is extremely important to consider the order in which the plugins are located at in the array as it will run from left to right. So that means you could be trying to map sources before you have the appropriate code to reference it. This is the order in which I have my plugins in:
plugins: [
resolve(),
peerDepsExternal(),
babel(
{
plugins: ['babel-plugin-styled-components'],
exclude: ['node_modules/**', 'public/**'],
extensions: ['.js', '.jsx', '.ts', '.tsx'],
inputSourceMap: true
}
),
typescript({ tsconfig: './tsconfig.json'}),
sourcemaps(),
commonjs({ extensions: ['.js', '.jsx', '.ts', '.tsx'],
include: /node_modules/ }),
url(),
postcss(),
terser()
]
If the problem persists, you may need to change some properties in the compilerOptions in your tsconfig.json to target src such as "sourceRoot": "src".
Old Answer:
I've had the same problem now in 04/2023. When using sourcemapping in our case, the mapping is looking for the src folder as a reference. It turns out that everything should be working as intended, but I didn't generate the src folder it is looking for. You don't need to disable source mapping, as it is highly recommend you use them. Adding "src" in the "files" array in package.json finally generated a copy of the src folder from my project.
"files": [ "dist", "src" ]
When you bundle everything with run rollup, the src folder is not present in the dist folder. But after downloading the package, it appears. These are the rollup.config.mjs and tsconfig.json files that worked for me. Before I included the src folder with its contents in the result bundle, limited testing on react 17 and nextjs 13 had everything working for me but produced the same error messages about source mapping. Including the src folder in the build only fixed the multiple errors it was displaying but still worked as before. This didn't really increase the bundle size for me though, but I'm not sure if it is a concern on bigger libraries.
const getTypesPath = (jsFile) => {
const pathInfo = parse(jsFile);
return format({
...pathInfo,
base: '',
dir: `${pathInfo.dir}/types`,
ext: '.d.ts',
});
};
const config = [
{
input: "src/index.ts",
output:
[ {
file: pkg.main,
format: "cjs",
sourcemap: true
},
{
file: pkg.module,
format: "esm",
sourcemap: true,
preserveModulesRoot: 'src'
}],
external: ['react','react-dom'],
plugins: [
peerDepsExternal(),
resolve(),
commonjs({ extensions: ['.js', '.jsx', '.ts', '.tsx'] }),
typescript({ tsconfig: "./tsconfig.json" }),
url(),
postcss(),
terser(),
]
},
{
input: getTypesPath(pkg.module ?? pkg.main),
output: [{ file: pkg.types, format: 'esm' }],
plugins: [dts()],
}
]
{
"compilerOptions": {
"target": "ES2016",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"jsx": "react-jsx",
"module": "ESNext",
"declaration": true,
"declarationDir": "./types",
"sourceMap": true,
"outDir": "types",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"emitDeclarationOnly": true,
"rootDir": "src",
"paths": {
"common": ["./src/*"],
"components": ["./src/components/*"]
}
},
"exclude":
[
"node_modules",
"**/*.stories.tsx",
"**/*.test.tsx",
"**/tests",
"**/setupTests.ts"
]
}
