webpack module not found in deployed app

Running into something really tricky/annoying and not sure what's causing. I'm working on a sample application for a longer writing project I'm working on about React. I'm trying to get the app deployed to a heroku dyno so readers will be able to see what they'll be building and all that fun stuff.

The app works, runs, and does what it needs to do locally. However, when I send it off to Heroku the webpack build complains about not being able to find a module. It's a fairly straightforward React app that gets compiled using webpack. I keep getting the following error in-console:

Uncaught Error: Cannot find module "./components/App"

Things that work, confusingly: - adding an external script tag w/ the same script - running the app locally in both dev and prod modes - running the heroku app locally via heroku local web

Any help would be greatly appreciated, this is super annoying :)

Deps:

"webpack": "^2.1.0-beta.14",
"webpack-dev-server": "^2.1.0-beta.0",
"webpack-hot-middleware": "^2.10.0"

Build.js (compiles and spits out the production code)

import webpack from 'webpack';
import ora from 'ora';
import { join } from 'path';
import config from './webpack.config.prod';
import mkdirp from 'mkdirp';

process.env.NODE_ENV = 'production';

const spinner = ora('Generating minified bundle for production. This will take a moment...').start();

mkdirp.sync(join(__dirname, 'dist'));

webpack(config).run((error, stats) => {
  if (error) { // so a fatal error occurred. Stop here.
    console.log(error);
    return 1;
  }

  const jsonStats = stats.toJson();

  if (jsonStats.hasErrors) {
    return jsonStats.errors.map(error => console.log(error));
  }

  if (jsonStats.hasWarnings) {
    spinner.text = 'Webpack generated the following warnings:';
    jsonStats.warnings.map(warning => console.log(warning));
  }

  spinner.text = 'Your app is compiled in production mode in /dist. It's ready to roll!';
  console.log('nApp successfully compiled!');
  setTimeout(() => spinner.stop(), 1000);
  return 0;
});

Webpack config (production):

import webpack from 'webpack';
import path from 'path';
const GLOBALS = {
  'process.env.NODE_ENV': JSON.stringify('production'),
  __DEV__: false,
  'process.env.ENDPOINT': JSON.stringify('<the endpoint is here>'),
};

export default {
  debug: true,
  devtool: 'source-map',
  noInfo: true,
  entry: './src/index',
  target: 'web',
  output: {
    path: path.join(__dirname, '..', 'dist'),
    publicPath: '/',
    filename: 'bundle.js',
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false,
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
      output: {
        comments: false,
      },
      sourceMap: false,
    }),
    new webpack.DefinePlugin(GLOBALS),
  ],
  module: {
    loaders: [{
      test: /.(js)$/,
      exclude: /node_modules/,
      loaders: [
        'babel-loader',
      ],
      query: {
        presets: ['es2015',
                'react',
                'stage-0',
                'es2015-native-modules',],
      },
    },
    {
      test: /(.css|.scss)$/,
      loaders: ['style', 'css?sourceMap', 'sass?sourceMap'],
    }, {
      test: /.(jpe?g|png|gif)$/i,
      loaders: ['file'],
    }, {
      test: /.ico$/,
      loader: 'file-loader?name=[name].[ext]',
    }, {
      test: /(.css|.scss)$/,
      include: path.join(__dirname, 'src'),
    }],
  },
};

.babelrc:

{
    "presets": [
        "es2015",
        "react",
        "stage-0",
        "es2015-native-modules",
    ],
    "plugins": ["transform-class-properties", "transform-runtime"],
    "env": {
        "development": {
            "plugins": [
                "typecheck",
            ],
            "presets": [
                "react-hmre"
            ]
        }
    }
}