Webpack not loading sourcemap from local library

Question

I have a library (simple helper functions) that is bundled with esbuild:

esbuild.js

esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  sourcemap: true,
  minify: true,
  out: 'dist',
  format: 'cjs',
  target: ['es6']
})

With the above, i see

/dist
    /user
        profile.d.ts
        settings.d.ts
        history.d.ts
    /invoice
        latest.d.ts
        quarter.d.ts
    index.d.ts
    index.js
    index.js.map

In my consuming app, i able able to import and use the above lib functions just fine. However debugging in the browser, the library code is minified/hard to read.

I am trying to get the consuming apps webpack.config to load either the raw src code from the lib or sourcemaps.

webpack.config.js:

module.exports = (env, argv) = {
  return {
    devtool: 'source-map',
    module: {
        rules: [
            {
                // Match js, jsx, ts & tsx files
               test: /\.[jt]sx?$/,
               loader: 'esbuild-loader',
               options: {
                   // JavaScript version to compile to
                   loader: 'tsx',
                   target: 'es2015',
                   sourcemap: true
               }
               exclude: /node_modules/
            }               
        ]
    },
    resolve: {
         extensions: ['.tsx', '.ts', '.js', '.jsx']
    },
    target: ['web', 'es5'],
    optimization: {
        minimizer: [
            new ESBuildMinifyPlugin({
                target: 'es2015'
            })
        ]
    }
  }
}

Answer 1

I think this might solve your issue!

To load source maps for debugging in both local development and production environments, you can make adjustments to your build configuration and your consuming app's webpack configuration.

Local Development:

During local development, you want to load the raw source code from the library for easier debugging. Configure esbuild to generate source maps and ensure they are properly loaded:

// esbuild.js
esbuild.build({
    entryPoints: ['src/index.ts'],
    bundle: true,
    sourcemap: 'external', // Generate external source maps
    minify: false, // Disable minification for easier debugging
    outdir: 'dist', // Output directory instead of a single file
    format: 'cjs',
    target: ['es6']
});

// webpack.config.js
module.exports = {
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.[jt]sx?$/,
                loader: 'esbuild-loader',
                options: {
                    loader: 'tsx',
                    target: 'es2015',
                    sourcemap: 'inline', // Load inline source maps
                },
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.jsx']
    },
    target: 'web',
    optimization: {
        minimizer: []
    }
};

Production:

In the production environment, you want to ensure that your bundle is optimized for performance while still allowing for debugging through source maps. Configure esbuild and webpack for production:

// esbuild.js
esbuild.build({
    entryPoints: ['src/index.ts'],
    bundle: true,
    sourcemap: 'external', // Generate external source maps
    minify: true, // Enable minification for production
    outdir: 'dist', // Output directory instead of a single file
    format: 'cjs',
    target: ['es6']
});

// webpack.config.js
const ESBuildMinifyPlugin = require('esbuild-loader').ESBuildMinifyPlugin;

module.exports = {
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.[jt]sx?$/,
                loader: 'esbuild-loader',
                options: {
                    loader: 'tsx',
                    target: 'es2015',
                    sourcemap: true // Generate separate source map files
                },
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.jsx']
    },
    target: 'web',
    optimization: {
        minimizer: [
            new ESBuildMinifyPlugin({
                target: 'es2015'
            })
        ]
    }
};

With these configurations, esbuild will generate external source map files during both local development and production builds. Your webpack configuration will then ensure that these source maps are properly loaded for debugging in the browser, allowing you to easily trace back to the original source code of your library functions.