Module not found: Error: Cannot resolve 'file' or 'directory'

[bmbrina]

Description

Deployment to Heroku fails when searching for a custom directory.

Error

remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory' ../components/layouts/main/main in /tmp/build_2382a25e2b852366900fece204e3330d/src
remote:
remote: npm ERR! Linux 3.13.0-95-generic
remote: npm ERR! argv "/tmp/build_2382a25e2b852366900fece204e3330d/.heroku/node/bin/node" "/tmp/build_2382a25e2b852366900fece204e3330d/.heroku/node/bin/npm" "run" "build"
remote: npm ERR! node v5.11.1
remote: npm ERR! npm v3.8.6
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! directumApp@0.1.0 build: react-scripts build
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the directumApp@0.1.0 build script 'react-scripts build'.
remote: npm ERR! Make sure you have the latest version of node.js and npm installed.
remote: npm ERR! If you do, this is most likely a problem with the directumApp package,
remote: npm ERR! not with npm itself.
remote: npm ERR! Tell the author that this fails on your system:
remote: npm ERR! react-scripts build
remote: npm ERR! You can get information on how to open an issue for this project with:
remote: npm ERR! npm bugs directumApp
remote: npm ERR! Or if that isn't available, you can get their info via:
remote: npm ERR! npm owner ls directumApp
remote: npm ERR! There is likely additional logging output above.
remote:
remote: npm ERR! Please include the following file with any support request:
remote: npm ERR! /tmp/build_2382a25e2b852366900fece204e3330d/npm-debug.log
remote: ! Push rejected, failed to compile React.js (create-react-app) multi app.
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to directumapp.
remote:
To https://git.heroku.com/directumapp.git
! [remote rejected] develop -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/directumapp.git'

[gaearon]

Hi!

What do you use for deploying to Heroku?
Also, does running npm run build locally work?

Cheers.

[gaearon]

It would also help if you could provide a minimal project reproducing this, or at least show your folder structure.

[bmbrina]

The problem is when building the project, the script doesn't find the correct paths.

npm run build output:

directumApp@0.1.0 build /Users/bmbrina/Documents/Developer/IcaliaLabs/directumApp
react-scripts build

sh: react-scripts: command not found

npm ERR! Darwin 16.0.0
npm ERR! argv "/Users/bmbrina/.nvm/versions/node/v4.3.2/bin/node" "/Users/bmbrina/.nvm/versions/node/v4.3.2/bin/npm" "run" "build"
npm ERR! node v4.3.2
npm ERR! npm v2.14.12
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! directumApp@0.1.0 build: react-scripts build
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the directumApp@0.1.0 build script 'react-scripts build'.
npm ERR! This is most likely a problem with the directumApp package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! react-scripts build
npm ERR! You can get their info via:
npm ERR! npm owner ls directumApp
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/bmbrina/Documents/Developer/IcaliaLabs/directumApp/npm-debug.log

[bmbrina]

Project structure

[gaearon]

sh: react-scripts: command not found

means you didn't run npm install, or it failed, so it was not installed.

Can you please run:

npm install -g npm@latest
rm -rf node_modules
npm install

and then run

npm run build

[bmbrina]

npm run build compiles successfully but the build output files are different from my source ones.

> directumApp@0.1.0 build /Users/bmbrina/Documents/Developer/IcaliaLabs/directumApp
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  173.41 KB  build/static/js/main.f4862a73.js
  340 B      build/static/css/main.ff089732.css

The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage": "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may also serve it locally with a static server:

  npm install -g pushstate-server
  pushstate-server build
  open http://localhost:9000

[thien-do]

@bmbrina I once met this issue recently, but at that time I'm using a forked version of react-scripts. I think you are using the default one?

Anyway, in my case, I fixed the issue by republish my forked version of react-scripts and specify the latest version of Node and NPM on my heroku app. Hope that helps.

UPDATE: I do guess that it is related to npm.. at first your local machine has the same issue, but then it is fixed when you update npm..

[gaearon]

npm run build compiles successfully but the build output files are different from my source ones

I'm not sure I understand the problem. They are supposed to be different: JS code is compiled into a single bundle and minified. So is CSS.

[bmbrina]

What I meant is that the files that are compiled doesn't contain my components. When I open the build files all I see is an empty page.

[gaearon]

Do you follow instructions for opening the build page? (They are printed after building. You need to run a local sever.)

Just opening HTML in the browser won't work. You need to run pushstate-server or equivalent.

[gaearon]

The instructions (copy pasted from your output above):

You may also serve it locally with a static server:

  npm install -g pushstate-server
  pushstate-server build
  open http://localhost:9000

Is there something we could do to make them clearer?

[bmbrina]

That works fine (the instructions). So if the project is building correctly, then why does Heroku rejects the deployment?

remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory' ./components/layouts/main/main in /tmp/build_5c8b6fb709a017b39ff8feb838d72c8f/src
remote: 
remote: npm ERR! Linux 3.13.0-95-generic
remote: npm ERR! argv "/tmp/build_5c8b6fb709a017b39ff8feb838d72c8f/.heroku/node/bin/node" "/tmp/build_5c8b6fb709a017b39ff8feb838d72c8f/.heroku/node/bin/npm" "run" "build"
remote: npm ERR! node v4.3.2
remote: npm ERR! npm  v3.10.8
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! directumApp@0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR! 
remote: npm ERR! Failed at the directumApp@0.1.0 build script 'react-scripts build'.
remote: npm ERR! Make sure you have the latest version of node.js and npm installed.
remote: npm ERR! If you do, this is most likely a problem with the directumApp package,
remote: npm ERR! not with npm itself.
remote: npm ERR! Tell the author that this fails on your system:
remote: npm ERR!     react-scripts build
remote: npm ERR! You can get information on how to open an issue for this project with:
remote: npm ERR!     npm bugs directumApp
remote: npm ERR! Or if that isn't available, you can get their info via:
remote: npm ERR!     npm owner ls directumApp
remote: npm ERR! There is likely additional logging output above.
remote: 
remote: npm ERR! Please include the following file with any support request:
remote: npm ERR!     /tmp/build_5c8b6fb709a017b39ff8feb838d72c8f/npm-debug.log
remote:  !     Push rejected, failed to compile React.js (create-react-app) multi app.
remote: 
remote:  !     Push failed
remote: Verifying deploy....
remote: 
remote: !   Push rejected to directumapp.
remote: 
To https://git.heroku.com/directumapp.git
 ! [remote rejected] develop -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/directumapp.git'

I specified the npm and node version on the package.json like so:

  "engines": {
    "npm": "3.10.8",
    "node": "4.3.2"
  },

and still nothing.

[gaearon]

Are you following these instructions for Heroku?

[gaearon]

(In particular, there's a Heroku buildpack you need to use with Create React App.)

[gaearon]

I'm afraid it will be hard to help without at least a minimal project reproducing the issue.
cc @mars — have you seen anything like this? Local build works, but not on Heroku.