Generated sourcemap maybe broken
nujarum opened this issue ยท comments
I think the generated sourcemap is probably broken.
Environment
name | version |
---|---|
Node.js | 14.19.0 / 16.13.2 |
esbuild | 0.14.18 |
rollup | 2.67.0 |
rollup-plugin-esbuild | 4.8.2 |
Procedure for reproducing
-
Prepare a simple TypeScript file as shown below.
index.ts
export function print1() { console.log(1); } export function print2() { console.log(2); } export function print3() { console.log(3); }
-
Transpile it with the rollup config file like the following.
rollup.config.js
import esbuild from 'rollup-plugin-esbuild'; export default [ { input: './src/index.ts', output: { file: './dist/index.js', format: 'cjs', sourcemap: true, }, plugins: [ esbuild({ target: 'es2020', // sourcemap: true, }), ], }, ];
-
The following
index.js.map
is generated withindex.js
, but it seems to be broken.{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["export function print1() {\n console.log(1);\n}\n\nexport function print2() {\n console.log(2);\n}\n\nexport function print3() {\n console.log(3);\n}\n"],"names":[],"mappings":";;;;AAAO,SAAS,MAAM,GAAG;AACzB,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACjB,CAAC;AACM,SAAS,MAAM,GAAG;AACzB,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACjB,CAAC;AACM,SAAS,MAAM,GAAG;AACzB,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACjB;;;;;;"}
You can check if the SourceMap is correct by using a tool like "Source Map Visualization".
Note that the sourcemap is correct when building with esbuild
alone, without rollup
and its plugins.
I apologize if this is my misunderstanding or incorrect usage.
Best regards,
Same here, checked with "Source Map Visualization" and found that generated sourcemap is incorrect.
Can't share the code under NDA, but configuration includes postcss usage:
{
input: paths.input,
plugins: [
externals(externalsConfig),
nodeResolve({
mainFields: ['jsnext:main', 'module', 'browser', 'main'],
extensions: ['.js', '.jsx'],
}),
url(),
svgr(),
esbuild({
watch: isWatchMode,
minify: isProduction,
}),
postcss({
extract: `${names.lib}.css`,
minimize: isProduction,
use: [
['sass', { includePaths: [path.resolve('node_modules')] }],
],
}),
commonjs({
ignoreGlobal: false,
sourceMap: false,
include: '**/node_modules/**',
}),
isESM && renameNodeModules('esm-dependencies', false),
!isESM && sizeSnapshot(),
dev(proxyConfig),
],
}
@egoist can you help with solution?
As for me, I worked around this issue by creating my own plugin and using it instead.
It outputs the correct SourceMap.
I'm happy to help the author @egoist and others who are facing this issue, so I'll post the workaround here.
This workaround only supports the *.ts
extension, but for now it is good enough for me because I only build TypeScripts.
rollup-plugin-esbuild.mjs
import { existsSync } from 'fs';
import { dirname, relative, resolve } from 'path';
import { transform } from 'esbuild';
const defaultOptions = {
treeShaking: true,
};
export default function esbuild(options) {
options = { ...defaultOptions, ...options };
options.format = 'esm';
options.loader = 'ts';
options.sourcemap = true;
return {
name: 'esbuild',
resolveId(source, importer, opts) {
// console.log('resolveId:');
// console.dir({ source, importer, opts }, { depth: null });
if (!importer || source.endsWith('.ts')) {
return source;
}
const dirPath = dirname(importer);
let path;
if (existsSync(path = resolve(dirPath, source, 'index.ts'))) {
return path;
} else if (existsSync(path = resolve(dirPath, source + '.ts'))) {
return path;
} else {
console.error({ source, importer, options: opts });
path = relative('.', resolve(importer, source));
throw new Error(`ENOENT: ${path.replace(/\\/g, '/')}`);
}
},
async transform(src, id) {
options.sourcefile = id;
const { code, map } = await transform(src, options);
return { code, map };
},
};
};
rollup.config.js
// import esbuild from 'rollup-plugin-esbuild';
import esbuild from './rollup-plugin-esbuild.mjs';
export default [
// Same configuration as before
];
The above workaround only supports the *.ts
extension, but with a little implementation, it should be able to handle *.sass
and other files.
The release is available on:
Your semantic-release bot