ShakaCode | ShakaCode Blog | Rails On Maui Blog | Rails | ReactJs | JavaScript | Webpack | Productivity |

"Cannot resolve 'file' or 'directory'"


Asked this question in many places, not sure if its a bug only i’m experiencing or that something is misconfigured as noone seems to know the answer…

I’m trying to deploy my app to heroku but it refuses to deploy with the following errors

ERROR in ./app/bundles/appbundle/startup/MyApp.jsx remote: Module not found: Error: Cannot resolve 'file' or 'directory' /tmp/build_5f0499a33a66627b6911c88bcf69f8ab/client/node_modules/react in /tmp/build_5f0499a33a66627b6911c88bcf69f8ab/client/app/bundles/appbundle/startup

This seems to be saying that it is trying to look for

No such directory exists on my local machine and it works fine there so I don’t understand why it is looking for a file there in production…

Everything works fine on my local machine and to be honest I don’t really understand enough about webpack/heroku to know what the problem is.

Here is my webpack.config.js if that helps.

const webpack = require('webpack')
const path = require('path')
const glob = require('glob')

const devBuild = process.env.NODE_ENV !== 'production'
const nodeEnv = devBuild ? 'development' : 'production'

const config = {
  entry: [

  output: {
    filename: 'webpack-bundle.js',
    path: '../app/assets/webpack'

  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
      react: path.resolve('./node_modules/react'),
      'react-dom': path.resolve('./node_modules/react-dom')

  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(nodeEnv)

  module: {
    loaders: [
        test: require.resolve('react'),
        loader: 'imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham'

        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/

module.exports = config

if (devBuild) {
  console.log('Webpack dev build for Rails')  // eslint-disable-line no-console
  module.exports.devtool = 'eval-source-map'
} else {
    new webpack.optimize.DedupePlugin()
  console.log('Webpack production build for Rails')  // eslint-disable-line no-console