How to load library source maps using webpack?

Question

I\'m building two projects with webpack; one is a library for the other.

Is it possible to consume the sourcemaps from my library project when building my wrapper projec

Answer 1

I am using create-react-app and this is how I Fixed it (without running eject cmd)

Note : If your app is already overriding webpack config using react-app-rewired you can ignore first three steps.

• npm i react-app-rewired -D - This will help you to override webpack configuration.
• package.json - change your scripts, replace react-scripts with react-app-rewired

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }

• config-overrides.js - create this file in the parent level of the app.

• npm i source-map-loader -D - To load source maps (assuming that your lib's dist has source map file). It doesn't matter which build tool(ex: Rollup, webpack or parcel) you use to generate sourcemap.

• Copy below code in config-overrides.js

module.exports = {
  webpack: (config, env) => {
    // Load source maps in dev mode
    if (env === 'development') {
      config.module.rules.push({
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        use: ['source-map-loader'],
        enforce: 'pre',
      });

      // For `babel-loader` make sure that sourceMap is true.
      config.module.rules = config.module.rules.map(rule => {
        // `create-react-app` uses `babel-loader` in oneOf
        if (rule.oneOf) {
          rule.oneOf.map(oneOfRule => {
            if (
              oneOfRule.loader &&
              oneOfRule.loader.indexOf('babel-loader') !== -1
            ) {
              if (oneOfRule.hasOwnProperty('options')) {
                if (oneOfRule.options.hasOwnProperty('sourceMaps')) {
                  // eslint-disable-next-line no-param-reassign
                  oneOfRule.options.sourceMaps = true;
                }
              }
            }
          });
        }
        return rule;
      });
    }

    return config;
  },
};

• Restart your app (if it's already running). source files get loaded in different locations, based on path in map file. Check all folders patiently :)

Note : 1. Your source maps get loaded in one of the folder(ex : localhost:3000 or webpack:/// ) based on path it reads from xxx.js.map file. 2. If you are using rollup for your libs, please make sure you give proper path in the configuration file (output.sourcemapPathTransform ), This will help to load sourcemaps in the proper location.