Babel/Webpack/React Source maps still don't work at all

[CamJN]

I read https://hacks.mozilla.org/2018/05/debugging-modern-web-applications/, and got my hopes up that source maps might finally work in FF, but alas they do not.

I'm using FF dev edition, up to date (61.0b4) as of today (May 15th, 2018) on macOS 10.13.4.

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    devtool: 'cheap-module-source-map',
    resolve: {
        modules: [
            path.resolve(__dirname, 'node_modules'),
            path.resolve(__dirname, 'src')
        ],
        extensions: ['.jsx','.scss','.js']
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "bundle.css"
        })
    ],
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true
            }),
            new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: { discardComments: { removeAll: true } },
            })
        ]
    },
    module: {
        rules: [
            {
                test: /\.(jsx?)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            },
            {
                test: /\.(s?[ca]ss)$/,
                use: [{ loader: MiniCssExtractPlugin.loader, },
                      { loader: 'css-loader', },
                      { loader: 'postcss-loader', options: {
                          plugins: function () {
                              return [
                                  require('precss'),
                                  require('autoprefixer')
                              ];
                          }
                      } },
                      { loader: 'sass-loader', options: {
                          sourceMap: true
                      } }]
            }
        ]
    }
};

package.json

{
  "name": "ui",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.1.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.9.0",
    "optimize-css-assets-webpack-plugin": "^4.0.1",
    "postcss-loader": "^2.1.5",
    "precss": "^3.1.2",
    "sass-loader": "^7.0.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.14"
  }
}

[jasonLaster]

Hi, I'm sorry that it was disappointing. It looks like we could not find your sourcemap. It looks like it should be built devtool: 'cheap-module-source-map'. Would you be up for a quick call so i can see what's going on?

[CamJN]

I guess that depends what you mean by a call, most web based conferencing software either requires downloading super sketchy software or only works in chrome. Either way thanks for getting back to me.

[jasonLaster]

I'd be happy to do a google hangout. What timezone are you in?

[CamJN]

I'm in Mountain Daylight Time (-6Hrs)

[jasonLaster]

i see. I'm free to talk anytime today. when's good for you?

[CamJN]

I'm available at most any time too.

[jasonLaster]

cool how about 1:30pm est (5 mins)

[CamJN]

sure

[jasonLaster]

https://hangouts.google.com/call/zq2fnprgi2LSHut2UViCAAEE

[jasonLaster]

A couple of notes from the call:

1. "Enable Sourcemaps" in the Settings pane was not set
2. 'cheap-module-source-map', was not including the App.jsx code...

[CamJN]

Apparently #2 is well-known: webpack/webpack#1194

Or maybe that's another issue.