Debugging create-react-app Build used for Unpacked Chrome Extension - reactjs

Question

My current build process is to build the project with create-react app, then load the unpacked build as an extension. From there, I launch it, but when I do, I get an error in my main.[hash].js:formatted file.
Normally, I'd click on that error to go to the line number, drop a debugger, reload, and then figure out what's causing the problem. However, the file seems to not be source-mapped. I can't step through this code:
{
key: "render",
value: function() {
var e = this
, t = this.state
, n = t.chromeVersion,
/// ... props, etc
, v = this.props.aProp,
, u = this.state.aStateVal,
, _ = Object(H.b)(this.state.anotherVal)
return p.a.createElement("div", {
// etc etc
which should instead look something like this:
render() {
const {
chromeVersion,
// other state values
} = this.state;
const error = this.props.aProp
const display = this.state.aStateVal,
let getStuff = aFunction(
this.state.anotherVal
);
return (
<div /...
// etc etc
my webpack.config.js at the base of the project looks like this:
const webpack = require("webpack");
if (!process.env.NODE_ENV) {
process.env.NODE_ENV = "development";
}
module.exports = {
entry: `${__dirname}/src/index.js`,
output: {
path: `${__dirname}/../build`,
filename: "background.js"
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: "babel-loader",
query: {
babelrc: false,
presets: [require.resolve("babel-preset-react-app")]
}
}
]
},
plugins: [
// there used to be an uglify here, but I've removed it
],
devtool: 'source-map'
};
I run my build with the following commands:
GENERATE_SOURCEMAP=true NODE_ENV=development react-scripts build
&& webpack --config path/to/webpack.config.js
&& node /path/to/prepareManifestForExtension.js // Needed for chrome app
What am I missing to be able to debug my code when running my chrome app? How do I get error messages that point to the source mapped line?