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

Created on 14 Oct 2017 · 27Comments · Source: rails/webpacker

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 > [email protected]: Use mz or fs-extra^3.0 with Promise Support
       [3/5] Fetching packages...
       info [email protected]: The platform "linux" is incompatible with this module.
       info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
       [4/5] Linking dependencies...
       warning "[email protected]" has unmet peer dependency "jquery@>=3.0.0".
       warning "[email protected]" 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

Source

aruprakshit

All 27 comments

Are you able to compile the assets locally? bundle exec rails webpacker:compile and with NODE_ENV=production bundle exec rails webpacker:compile

gauravtiwari on 14 Oct 2017

Please scroll up after compilation and notice if you get any compilation errors. Pretty sure, there is something wrong with paths.

gauravtiwari on 14 Oct 2017

@gauravtiwari No locally no error.

$ bundle exec rails webpacker:compile
Webpacker is installed 🎉 🍰
Using /Users/arup/part-time-projects/timelord/config/webpacker.yml file for setting up webpack paths
[Webpacker] Compiling assets 🎉
[Webpacker] Compiled digests for all packs in /Users/arup/part-time-projects/timelord/app/javascript/packs:
{"Test.js"=>"/packs/Test.js", "application.js"=>"/packs/application.js", "counter.css"=>"/packs/counter.css", "counter.js"=>"/packs/counter.js", "hello_react.js"=>"/packs/hello_react.js", "hold.js"=>"/packs/hold.js", "projects.css"=>"/packs/projects.css", "projects.js"=>"/packs/projects.js"}
$ NODE_ENV=production bundle exec rails webpacker:compile
Webpacker is installed 🎉 🍰
Using /Users/arup/part-time-projects/timelord/config/webpacker.yml file for setting up webpack paths
[Webpacker] Compiling assets 🎉
[Webpacker] Compiled digests for all packs in /Users/arup/part-time-projects/timelord/app/javascript/packs:
{"Test.js"=>"/packs/Test-d8b0eb27a1ed7c64dd5d.js", "Test.js.map"=>"/packs/Test-d8b0eb27a1ed7c64dd5d.js.map", "application.js"=>"/packs/application-515fd605de729aa0b9c4.js", "application.js.map"=>"/packs/application-515fd605de729aa0b9c4.js.map", "counter.css"=>"/packs/counter-b2aac41cf70b6c4ab762.css", "counter.css.map"=>"/packs/counter-b2aac41cf70b6c4ab762.css.map", "counter.js"=>"/packs/counter-d411d107d04c6530150a.js", "counter.js.map"=>"/packs/counter-d411d107d04c6530150a.js.map", "hello_react.js"=>"/packs/hello_react-2483c63e5eb5ecd42b44.js", "hello_react.js.map"=>"/packs/hello_react-2483c63e5eb5ecd42b44.js.map", "hold.js"=>"/packs/hold-413d6b0aa7bd48fc46ce.js", "hold.js.map"=>"/packs/hold-413d6b0aa7bd48fc46ce.js.map", "projects.css"=>"/packs/projects-b2aac41cf70b6c4ab762.css", "projects.css.map"=>"/packs/projects-b2aac41cf70b6c4ab762.css.map", "projects.js"=>"/packs/projects-6623f5530096af198429.js", "projects.js.map"=>"/packs/projects-6623f5530096af198429.js.map"}
$ git status

aruprakshit on 14 Oct 2017

What version of webpacker are you using btw? 3.0.2?

gauravtiwari on 14 Oct 2017

Also, have you committed your yarn.lock file to git? Probably, yarn.lock is in gitignore

yarn install v1.2.1
       info No lockfile found.

gauravtiwari on 14 Oct 2017

@gauravtiwari webpacker (2.0).

Yes, If I keep that, then I get below error from Heroku:

$ git push heroku master
Counting objects: 125, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (121/121), done.
Writing objects: 100% (125/125), 33.33 KiB | 0 bytes/s, done.
Total 125 (delta 72), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Build failed
remote:  !     Two different lockfiles found: package-lock.json and yarn.lock
remote:
remote:        Both npm and yarn have created lockfiles for this application,
remote:        but only one can be used to install dependencies. Installing
remote:        dependencies using the wrong package manager can result in missing
remote:        packages or subtle bugs in production.
remote:
remote:        - To use npm to install your application's dependencies please delete
remote:          the yarn.lock file.
remote:
remote:          $ git rm yarn.lock
remote:
remote:        - To use yarn to install your application's dependences please delete
remote:          the package-lock.json file.
remote:
remote:          $ git rm package-lock.json
remote:
remote:        https://kb.heroku.com/why-is-my-node-js-build-failing-because-of-conflicting-lock-files
remote:
remote:  !     Push rejected, failed to compile Node.js app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !   Push rejected to guarded-taiga-25397.
remote:
To https://git.heroku.com/guarded-taiga-25397.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/guarded-taiga-25397.git'

So I kept package-lock.json in repo, and remove yarn.lock .

aruprakshit on 14 Oct 2017

@gauravtiwari If I move Sections.js into Project folder and adjust the Conatainer.js as

import { Header, Body, Footer } from './Sections';

Then all good in Heroku side. But still I would like to know what was wrong in my previous setup.

aruprakshit on 14 Oct 2017

@aruprakshit Ahh there you go,

    ├── Project
    │   ├── Container.js
    │   └── Form.js
    ├── Project.js

You got two project - one folder and one file there.

Module not found: Error: Can't resolve '../ProjectFormFields/Sections' in '/tmp/build_9ae4eb4f5ad1b32918646d1a1fd6aee9/app/javascript/projects/Project'

Try renaming project folder to something else?

gauravtiwari on 14 Oct 2017

@gauravtiwari I don't get why this will be an error. The Sections.js was imported into the Project/Container.js file.

aruprakshit on 15 Oct 2017

@aruprakshit It's hard to debug it this way. Could you please post an example on Github where I can reproduce this issue? (just minimal example with nested directories)

gauravtiwari on 15 Oct 2017

@gauravtiwari I will do. Please keep this ticket open for some days. I think having a repo where we can reproduce it will be best.

aruprakshit on 15 Oct 2017

Sure, no problem 👍

gauravtiwari on 15 Oct 2017

@gauravtiwari sorry man. I am way to busy to create small app for this issue, but I will do it. :)

aruprakshit on 6 Nov 2017

👍1

I might have a similar problem. Seems like there is a problem with importing components in Capitalized subdirectories (on Heroku only):

ERROR in ./app/javascript/modules/navigation/container.js
Module not found: Error: Can't resolve 'components/Layout/Navigation' in '/tmp/build_de58204cac9da60935226944fa08eb3f/app/javascript/modules/navigation'
@ ./app/javascript/modules/navigation/container.js 17:18-57
@ ./app/javascript/modules/navigation/component.js
@ ./app/javascript/packs/react-ssr.js
ERROR in ./app/javascript/modules/search/container.js
Module not found: Error: Can't resolve 'components/Pages/SearchPage' in '/tmp/build_de58204cac9da60935226944fa08eb3f/app/javascript/modules/search'
@ ./app/javascript/modules/search/container.js 17:18-56
@ ./app/javascript/modules/search/component.js
@ ./app/javascript/packs/react-ssr.js
ERROR in ./app/javascript/packs/react-ssr.js
Module not found: Error: Can't resolve 'components/Shared/AccommodationsList' in '/tmp/build_de58204cac9da60935226944fa08eb3f/app/javascript/packs'
@ ./app/javascript/packs/react-ssr.js 7:26-73
ERROR in ./app/javascript/packs/react-ssr.js
Module not found: Error: Can't resolve 'components/Shared/LocationInput' in '/tmp/build_de58204cac9da60935226944fa08eb3f/app/javascript/packs'
@ ./app/javascript/packs/react-ssr.js 11:21-63

I also would need some advice with this issue

davebream on 30 Nov 2017

👍1

Could you please try adding this plugin and see if it solves your problem?

yarn add case-sensitive-paths-webpack-plugin

// environment.js
// webpacker 3.0.2
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
environment.plugins.set('CaseSensitivePaths', new CaseSensitivePathsPlugin())

gauravtiwari on 30 Nov 2017

@gauravtiwari Thank you for your response :)
Adding a plugin didn't change anything. Same imports are failing on Heroku. No imports failing when compiling locally. 😞

davebream on 30 Nov 2017