source-map-analyzer: Unable to find a source map with react-app-rewired

Question

After building my React app with react-app-rewired and running source-map-explorer to analyze the bundle size, I got the following error output in the terminal:

Below is my setup:

confg-overrides.js

const { override, useBabelRc, adjustStyleLoaders, addWebpackAlias } = require('customize-cra');
const glob = require('glob');
const path = require('path');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const addWebpackPlugins = (config, env) => {
  config.plugins.push(
    new UglifyJsPlugin({
      uglifyOptions: { compress: { unused: true, dead_code: true } },
    })
  );

  return config;
};

const disableChunking = (config) => {
  config.optimization.runtimeChunk = false;
  config.optimization.splitChunks = {
    cacheGroups: {
      default: false
    }
  };
  return config;
};

const cssLoader = adjustStyleLoaders(({ use: [ , css, postcss, resolve, processor ] }) => {
  css.options.sourceMap = true;         // css-loader
  postcss.options.sourceMap = true;     // postcss-loader
  // when enable pre-processor,
  // resolve-url-loader will be enabled too
  if (resolve) {
    resolve.options.sourceMap = true;   // resolve-url-loader
  }
  // pre-processor
  if (processor && processor.loader.includes('sass-loader')) {
    processor.options.sourceMap = true; // sass-loader
  }
})

const isProd = process.env.NODE_ENV.includes('prod');

// production
module.exports = override(
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useBabelRc(),
  addWebpackAlias({
    '@styles': path.resolve(__dirname, './src/styles'),
  }),
  isProd ? addWebpackPlugins : null,
  isProd ? disableChunking : null,
  isProd ? cssLoader : null,
);

package.json

{
...

"devDependencies": {

    ...
    "source-map-explorer": "2.5.3",
},
"scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "start": "NODE_ENV=dev && GENERATE_SOURCEMAP=true && react-app-rewired start",
    "build": "NODE_ENV=prod && GENERATE_SOURCEMAP=true && react-app-rewired build",
    "test": "jest",
    "eject": "react-app-rewired eject",
    "serve": "serve -s build"
},

}

How can I solve this?

Answer 1

Turns out I have to specify sourceMap: true for UglifyJsPlugin in config-overrides as followed:

const { override, useBabelRc, adjustStyleLoaders, addWebpackAlias } = require('customize-cra');
const path = require('path');


const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const addWebpackPlugins = (config, env) => {
  config.plugins.push(
    new UglifyJsPlugin({
      sourceMap: true, // enabing source map in production build
      uglifyOptions: {
        compress: { unused: true, dead_code: true } 
      },
    })
  );

  return config;
};

const disableChunking = (config) => {
  config.optimization.runtimeChunk = false;
  config.optimization.splitChunks = {
    cacheGroups: {
      default: false
    }
  };
  return config;
};

const cssLoader = adjustStyleLoaders(({ use: [ , css, postcss, resolve, processor ] }) => {
  css.options.sourceMap = true;         // css-loader
  postcss.options.sourceMap = true;     // postcss-loader
  // when enable pre-processor,
  // resolve-url-loader will be enabled too
  if (resolve) {
    resolve.options.sourceMap = true;   // resolve-url-loader
  }
  // pre-processor
  if (processor && processor.loader.includes('sass-loader')) {
    processor.options.sourceMap = true; // sass-loader
  }
})

const isProd = process.env.NODE_ENV.includes('prod');

console.log({ isProd });

// production
module.exports = override(
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useBabelRc(),
  addWebpackAlias({
    '@styles': path.resolve(__dirname, './src/styles'),
  }),
  isProd ? addWebpackPlugins : null,
  isProd ? disableChunking : null,
  isProd ? cssLoader : null,
);