webpacker: Rails webpacker not able to load the es6 modules from nested directory in production heroku

We do have the below structure for our React app.

$ tree app/javascript/
app/javascript/
├── counter
│   ├── counter.js
│   ├── index.js
│   └── style.sass
├── packs
│   ├── Test.jsx
│   ├── application.js
│   ├── counter.js
│   ├── hello_react.jsx
│   ├── hold.js
│   └── projects.js
└── projects
    ├── CounterTopsFields
    │   ├── Main.js
    │   └── Steps
    │       ├── FormStepFive.js
    │       ├── FormStepFour.js
    │       ├── FormStepOne.js
    │       ├── FormStepThree.js
    │       └── FormStepTwo.js
    ├── Media
    │   ├── Main.js
    │   ├── Preview.js
    │   └── Uploader.js
    ├── Noprojects.js
    ├── Project
    │   ├── Container.js
    │   └── Form.js
    ├── Project.js
    ├── ProjectFormFields
    │   ├── Main.js
    │   ├── Sections.js
    │   └── Steps
    │       ├── FormStepOne.js
    │       └── FormStepTwo.js
    ├── ProjectList
    │   ├── Item.js
    │   └── Main.js
    ├── ProjectTypes.js
    ├── index.js
    └── styles
        └── index.scss

We have the Container.js file defined as:

import React, { Component } from "react";
import axios from 'axios';

import ProjectTypes from "../ProjectTypes";
import Form from "./Form";
import { Header, Body, Footer } from '../ProjectFormFields/Sections';

The whole code works in development machine. We use Procfile.dev as a development machine start up script. which has content:

web: bundle exec rails s
webpacker: ./bin/webpack-dev-server

But when we push the code to Heroku it fails:

yarn install v1.2.1
       info No lockfile found.
       [1/5] Validating package.json...
       [2/5] Resolving packages...
       warning precss > postcss-partial-import > fs-promise@0.3.1: Use mz or fs-extra^3.0 with Promise Support
       [3/5] Fetching packages...
       info fsevents@1.1.2: The platform "linux" is incompatible with this module.
       info "fsevents@1.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
       [4/5] Linking dependencies...
       warning "bootstrap@4.0.0-beta" has unmet peer dependency "jquery@>=3.0.0".
       warning "slick-carousel@1.8.1" has unmet peer dependency "jquery@>=1.8.0".
       [5/5] Building fresh packages...
       success Saved lockfile.
       Done in 30.36s.
       I, [2017-10-14T19:35:02.465660 #1092]  INFO -- : Writing /tmp/build_9ae4eb4f5ad1b32918646d1a1fd6aee9/public/assets/application-fda7da2988902d85492e9d1788a23f4918b5923c76c23af76ae853481df3b917.js
       I, [2017-10-14T19:35:02.466204 #1092]  INFO -- : Writing /tmp/build_9ae4eb4f5ad1b32918646d1a1fd6aee9/public/assets/application-fda7da2988902d85492e9d1788a23f4918b5923c76c23af76ae853481df3b917.js.gz
       I, [2017-10-14T19:35:03.093445 #1092]  INFO -- : Writing /tmp/build_9ae4eb4f5ad1b32918646d1a1fd6aee9/public/assets/express/lib/application-489ef282d160b38a75de19f711472bb48c4eca65cecd6e1ed83fceba74dcee35.js
       I, [2017-10-14T19:35:03.094217 #1092]  INFO -- : Writing /tmp/build_9ae4eb4f5ad1b32918646d1a1fd6aee9/public/assets/express/lib/application-489ef282d160b38a75de19f711472bb48c4eca65cecd6e1ed83fceba74dcee35.js.gz
       Webpacker is installed 🎉 🍰
       Using /tmp/build_9ae4eb4f5ad1b32918646d1a1fd6aee9/config/webpacker.yml file for setting up webpack paths
       [Webpacker] Compiling assets 🎉
       [Webpacker] Compilation Failed
       yarn run v1.2.1
       $ /tmp/build_9ae4eb4f5ad1b32918646d1a1fd6aee9/node_modules/.bin/webpack --config /tmp/build_9ae4eb4f5ad1b32918646d1a1fd6aee9/config/webpack/production.js
       Hash: ddfe7af0f810e849679d
       Time: 20870ms
       [11] ./~/react/react.js 56 bytes {0} {1} {2} [built]
       [16] ./~/react/lib/React.js 4.96 kB {0} {1} {2} [built]
       [48] ./~/react-dom/index.js 59 bytes {0} {1} {2} [built]
       [109] ./~/react-dom/lib/ReactDOM.js 5.05 kB {0} {1} {2} [built]
       [177] ./app/javascript/counter/index.js 193 bytes {3} [built]
       [178] ./app/javascript/projects/index.js 4.79 kB {0} [built]
       [179] ./~/prop-types/index.js 956 bytes {1} [built]
       [198] ./app/javascript/packs/Test.jsx 2.06 kB {2} [built]
       [199] ./app/javascript/packs/hello_react.jsx 739 bytes {1} [built]
       [201] ./app/javascript/packs/application.js 515 bytes {5} [built]
       [202] ./app/javascript/packs/counter.js 60 bytes {3} [built]
       [203] ./app/javascript/packs/hold.js 1.84 kB {4} [built]
       [204] ./app/javascript/packs/projects.js 18 bytes {0} [built]
       [226] ./~/immutability-helper/index.js 6.48 kB {0} [built]
       [229] ./~/prop-types/factoryWithThrowingShims.js 1.49 kB {1} [built]
       + 221 hidden modules
       ERROR in ./app/javascript/projects/Project/Container.js
       Module not found: Error: Can't resolve '../ProjectFormFields/Sections' in '/tmp/build_9ae4eb4f5ad1b32918646d1a1fd6aee9/app/javascript/projects/Project'
       @ ./app/javascript/projects/Project/Container.js 64:0-69
       @ ./app/javascript/projects/index.js
       @ ./app/javascript/packs/projects.js
       Child extract-text-webpack-plugin:
       [0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ./~/css-loader?{"minimize":true}!./~/postcss-loader/lib?{"sourceMap":true}!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"sourceMap":true}!./app/javascript/counter/style.sass 369 bytes {0} [built]
       Child extract-text-webpack-plugin:
       [0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ./~/css-loader?{"minimize":true}!./~/postcss-loader/lib?{"sourceMap":true}!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"sourceMap":true}!./app/javascript/projects/Media/style.scss 456 bytes {0} [built]
       Child extract-text-webpack-plugin:
       [0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ./~/css-loader?{"minimize":true}!./~/postcss-loader/lib?{"sourceMap":true}!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"sourceMap":true}!./app/javascript/projects/styles/index.scss 134 kB {0} [built]
       info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
       
       warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.
       error Command failed with exit code 2.
       
 !
 !     Precompiling assets failed.
 !
 !     Push rejected, failed to compile Ruby app.
 !     Push failed

Why is it not able to load the module from another directory?

My environment info:

$ rails -v
Rails 5.1.1
$ ruby -v
ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-darwin16]
$ yarn -v
1.0.1
$ npm -v
5.4.1