Cant resolve module 'babel' when running dist

Question

I´ve built my project upon the generator-react-webpack. Now I am trying to deploy my react app to Heroku. In the process of Building dependencies I get an error:

npm run copy & webpack --env=dist
remote:        
remote:        Hash: 82c8f499a3f6822a3522
remote:        Version: webpack 1.13.3
remote:        Time: 73ms
remote:        
remote:        ERROR in Entry module not found: Error: Cannot resolve module 'babel' in /tmp/build_a9e8f64bdab19b2486d922d4ba0f3d83

There seems to be something weird with the loader. I´ve tried to include 'babel' in dependencies, and also tried to replace it with 'babel-core' and it did not work.

I´m super frustrated with this problem and would appreciate it alot if someone could help me. Thanks!

---

package.json

{
  "name": "templateApp",
  "private": true,
  "version": "0.0.1",
  "description": "Template application for future builds",
  "main": "",
  "engines": {
    "node": "6.2.2"
  },
  "scripts": {
    "clean": "rimraf dist/*",
    "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
    "dist": "npm run copy & webpack --env=dist",
    "lint": "eslint ./src",
    "posttest": "npm run lint",
    "release:major": "npm version major && npm publish && git push --follow-tags",
    "release:minor": "npm version minor && npm publish && git push --follow-tags",
    "release:patch": "npm version patch && npm publish && git push --follow-tags",
    "serve": "node server.js --env=dev",
    "serve:dist": "node server.js --env=dist",
    "dev": "node server.js --env=dev",
    "start": "node server.js --env=dev",
    "test": "karma start",
    "test:watch": "karma start --autoWatch=true --singleRun=false",
    "postinstall": "npm run dist && npm run start"
  },
  "repository": "",
  "keywords": [],
  "author": "Alfred Ödling",
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-eslint": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.5.0",
    "bower-webpack-plugin": "^0.1.9",
    "chai": "^3.2.0",
    "copyfiles": "^0.2.1",
    "css-loader": "^0.23.0",
    "eslint": "^2.2.0",
    "eslint-loader": "^1.0.0",
    "eslint-plugin-react": "^5.0.0",
    "file-loader": "^0.8.4",
    "glob": "^7.0.0",
    "isparta-instrumenter-loader": "^1.0.0",
    "karma": "^0.13.9",
    "karma-chai": "^0.1.0",
    "karma-coverage": "^1.0.0",
    "karma-mocha": "^1.0.0",
    "karma-mocha-reporter": "^2.0.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sourcemap-loader": "^0.3.5",
    "karma-webpack": "^1.7.0",
    "lost": "^7.0.3",
    "minimist": "^1.2.0",
    "mocha": "^2.2.5",
    "node-sass": "^3.4.2",
    "null-loader": "^0.1.1",
    "open": "0.0.5",
    "phantomjs-prebuilt": "^2.0.0",
    "postcss": "^5.0.11",
    "postcss-loader": "^0.8.0",
    "react-addons-test-utils": "^15.0.0",
    "react-hot-loader": "^1.2.9",
    "rimraf": "^2.4.3",
    "rucksack-css": "^0.8.6",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.0",
    "webpack-dev-server": "^1.12.0"
  },
  "dependencies": {
    "autoprefixer": "^6.3.7",
    "axios": "^0.13.1",
    "classnames": "^2.2.5",
    "clipboard": "^1.5.12",
    "core-js": "^2.0.0",
    "firebase": "^3.4.1",
    "fixed-data-table": "^0.6.3",
    "flat": "^2.0.1",
    "history": "^3.0.0",
    "lodash": "^4.15.0",
    "lost": "^7.0.3",
    "normalize.css": "^4.0.0",
    "postcss": "^5.1.1",
    "postcss-cli": "^2.5.2",
    "postcss-cssnext": "^2.8.0",
    "postcss-import": "^8.1.2",
    "postcss-loader": "^0.8.2",
    "react": "^15.0.0",
    "react-addons-css-transition-group": "^15.3.0",
    "react-cookie": "^0.4.8",
    "react-datagrid": "^2.1.1",
    "react-dom": "^15.3.1",
    "react-redux": "^4.4.5",
    "react-router": "^2.6.1",
    "react-tooltip": "^3.2.1",
    "redux": "^3.5.2",
    "redux-thunk": "^2.1.0",
    "rucksack-css": "^0.8.6",
    "seamless-immutable": "^6.1.1"
  }
}

dist.js

'use strict';

let path = require('path');
let webpack = require('webpack');

let baseConfig = require('./base');
let defaultSettings = require('./defaults');

// Add needed plugins here
let BowerWebpackPlugin = require('bower-webpack-plugin');

let config = Object.assign({}, baseConfig, {
  entry: path.join(__dirname, '../src/index'),
  cache: false,
  devtool: 'sourcemap',
  plugins: [
    new webpack.optimize.DedupePlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new BowerWebpackPlugin({
      searchResolveModulesDirectories: false
    }),
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: defaultSettings.getDefaultModules()
});

// Add needed loaders to the defaults here
config.module.loaders.push({
  test: /\.(js|jsx)$/,
  loader: 'babel',
  include: [].concat(
    config.additionalPaths,
    [ path.join(__dirname, '/../src') ]
  )
});

module.exports = config;

Answer 1

From https://github.com/mxstbr/react-boilerplate/issues/914

"Make sure you set NPM_CONFIG_PRODUCTION=false on heroku. Without this devDependencies won't be installed. Which are needed for this boilerplate to build.

If you have heroku cli installed you can heroku config:set NPM_CONFIG_PRODUCTION=false --app your-app-name

else go to the settings tab on your app and add in Config Variables"

This fixed it!

Answer 2

Can you change your entry from your dist.js file to this:

entry: [
  'babel-polyfill',
  path.join(__dirname, '../src/index')
],