Generated sourcemap maybe broken

[nujarum]

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

1. 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);
   }
   

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

3. The following index.js.map is generated with index.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,

[glebcha]

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?

[nujarum]

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
];

---

@glebcha

The above workaround only supports the *.ts extension, but with a little implementation, it should be able to handle *.sass and other files.

[glebcha]

@nujarum I used another great rollup plugin which has no problems at all. Will be great if @egoist can dig deeper and fix sourcemap issue later.

[github-actions[bot]]

:tada: This issue has been resolved in version 4.10.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: