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
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 27 (12 by maintainers)
Ok so I think I know what the problem is. Just to make sure: @aruprakshit are you working on OS X?
The default OS X disk format is case-preserving, but not case-sensitive. It means, that unless you’re using Mac OS Extended (Case-sensitive, Journaled) format, git is not seeing directories change when you rename them to the same name, but different case. Heroku uses Linux which always treats directories with case-sensitivity.
In other words, when I rename
components/pages/SearchPage
tocomponents/Pages/SearchPage
, my local OS X server works ok (it finds the directory no matter the case is), but the change is not reflected in git, so it’s also not checked out and commited. So Iimport SearchPage from 'components/Pages/SearchPage
but as far as Heroku’s Linux is concerned, my directory hasn’t changed, and it’s stillcomponents/pages/SearchPage
. And because of that my path is not able to be resolved.What’s the solution? one of the following:
I hope that helps, as for me this issue might be closed 😉
I might have a similar problem. Seems like there is a problem with importing components in Capitalized subdirectories (on Heroku only):
I also would need some advice with this issue
@gauravtiwari sorry man. I am way to busy to create small app for this issue, but I will do it. 😃