Create-react-app: Module not found: Error: Cannot resolve 'file' or 'directory'
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! [email protected] build: react-scripts build
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the [email protected] 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'
bmbrina
All 42 comments
Hi!
What do you use for deploying to Heroku?
Also, does running npm run build locally work?
Cheers.
gaearon
on 14 Oct 2016
It would also help if you could provide a minimal project reproducing this, or at least show your folder structure.
gaearon
on 14 Oct 2016
The problem is when building the project, the script doesn't find the correct paths.
npm run build output:
[email protected] 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! [email protected] build: react-scripts build
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] 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
on 14 Oct 2016
Project structure
bmbrina
on 14 Oct 2016
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
npm run build compiles successfully but the build output files are different from my source ones.
> [email protected] 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
bmbrina
on 14 Oct 2016
@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..
dvkndn
on 14 Oct 2016
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.
gaearon
on 15 Oct 2016
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.
bmbrina
on 15 Oct 2016
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
on 15 Oct 2016
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?
gaearon
on 15 Oct 2016
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! [email protected] build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the [email protected] 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.
bmbrina
on 15 Oct 2016
Are you following these instructions for Heroku?
gaearon
on 15 Oct 2016
(In particular, there's a Heroku buildpack you need to use with Create React App.)
gaearon
on 15 Oct 2016
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.
gaearon
on 15 Oct 2016
I'm using the Heroku guides specified on the project read me that was generates by Create React App. Let me see if I can share the project with you.
bmbrina
on 15 Oct 2016
Yea, sorry about the troubles. If you'd like, you can drop a private email (my email is on my profile) and I can try reproducing this on Monday by myself.
gaearon
on 15 Oct 2016
Does this app already run & build locally? Do npm start & npm run build both execute successfully?
It looks like a reference to ../components/layouts/main/main is incorrect. In the description it is prefixed with .. while in the comment it is prefixed with .
These do different things:
..goes up a directory level.is the current directory
I cannot diagnose further without seeing the source code.
mars
on 15 Oct 2016
They both execute successfully, I think the app it's trying to locate that file somewhere it's not located. I don't know if it could be a problem with my routes.
bmbrina
on 15 Oct 2016
The Module not found error is from an import or require statement.
You replied that run & build work locally. In addition to simply running locally, ensure the app isn't logging errors to the browser console either.
Did you git commit all of your local changes before pushing to Heroku?
mars
on 15 Oct 2016
@gaearon here's the GitHub repo:
https://github.com/bmbrina/ideal-octo-enigma
@mars the app doesn't log errors on the terminal nor on the browser console and yes I did the commit.
bmbrina
on 17 Oct 2016
Hi @bmbrina, I'm able to deploy the repo above to heroku: https://mysterious-tundra-34542.herokuapp.com with create-react-app buildpack. Is this your app?
dvkndn
on 17 Oct 2016
Hi @dvkndn, that's my app! How did you do that? 👀
bmbrina
on 17 Oct 2016
@bmbrina nothing special..
- I download your repo
- git init it
- create a heroku app
- add create-react-app buildpack to that heroku app
- add heroku remote to the repo
- push to heroku
Anyway, I added you the the heroku app above. I suggest you to take a look at the latest build log and compare it with your heroku app log, so we might see something
dvkndn
on 17 Oct 2016
Yeah, that worked perfectly. The only thing I was doing differently was the push:
git push heroku develop:master
So I'm going to do a merge from my develop branch to master and see if that works on the original repo. Thanks guys!
bmbrina
on 17 Oct 2016
Good luck @bmbrina . Also, I don't know why you list "webpack" and "webpack-dev-server" as your dev dependencies.. I thought they are already included in CRA itself..
dvkndn
on 17 Oct 2016
Yea you don't need any devDependencies except react-scripts.
gaearon
on 17 Oct 2016
@bmbrina Have you successfully resolved the issue? Is there anything we could add to documentation?
gaearon
on 24 Oct 2016
I'm having exactly the same issue that bmbrina had, but my situation may be a bit different. My project folder consists of a typical Rails app, with a folder at the top level directory called "ui" which contains the files generated by create-react-app and some components I wrote.
I added the Rails and create-react-app buildpacks. If I build as-is, I get
"remote: -----> Failed to detect set buildpack https://github.com/mars/create-react-app-buildpack.git"
If I include a package.json in the top level directory, then the buildpack gets called, it runs, but I can't actually get it to run build inside ui/, where the React app actually lives. What can I be doing instead?
gmei2
on 7 Dec 2016
Could you file an issue in the buildpack?
gaearon
on 7 Dec 2016
@gmei2, create-react-app-buildpack for Heroku is designed to deploy a React app as a static web site. Much like CRA itself, it relies on built-in defaults to work with zero configuration, which means customization of the build & runtime is limited.
The CRA buildpack is not designed to compose with the Rails buildpack. Either separate the Rails app from the React app into two repos and deploy them independently, or you will need to follow a different path to combine them (this article looks current).
Please do file issues on the buildpack repo.
mars
on 7 Dec 2016
@gaearon, @mars Thanks for the suggestion, I'll file the issue on the buildpack repo if I don't figure this out soon. I think the article @mars linked doesn't go far enough in explaining how to deploy to Heroku (npm start is just for webpack dev server right?), but he linked to a comment he made on Github discussing working with Node+React on Heroku, so there may be clues there. Thanks again!
gmei2
on 8 Dec 2016
Wow.. I meet this issue myself today, again.. still haven't figured out why yet..
dvkndn
on 20 Dec 2016
Maybe case sensitivity issue?
See this:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-on-heroku
gaearon
on 21 Dec 2016
I'm having the same issue here. A Rails project with a subfolder at the root level called "client", where CRA lives, complete with a package.json file and node_modules dir. In the root directory, I created a package.json with the following:
"scripts": {
"postinstall": "cd client && npm install"
}
In client/, package.json is provided by CRA:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"postinstall": "npm run build"
}
When running heroku/nodejs buildpack on Heroku, which as far as I understand basically runs npm install in the root directory, I get:
-----> Building dependencies
Installing node modules (package.json)
> [email protected] postinstall /tmp/build_dead566c109efab384b50ece44a94480
> cd client && npm install
> [email protected] postinstall /tmp/build_dead566c109efab384b50ece44a94480/client
> npm run build
> [email protected] build /tmp/build_dead566c109efab384b50ece44a94480/client
> react-scripts build
sh: 1: react-scripts: not found
I'm assuming npm install must have completed successfully, so react-scripts must be in the client/node_modules/.bin. (Although I can't verify that because Heroku.)
hazelsparrow
on 22 Dec 2016
sh: 1: react-scripts: not found
This is not the same issue as discussed in this thread. The message you are seeing is from npm, but the message discussed in this thread is from Webpack. As you correctly noted, something’s wrong with node_modules folder in your case.
gaearon
on 22 Dec 2016
@gaearon I'm sorry, I had multiple tabs opened last night before leaving and thought I was commenting in the right one after I came to work this morning. Yes, you're right, it's a different issue. I'll try to find help elsewhere
@mars I'm not using create-react-app-buildpack. I've added the heroku/nodejs buildpack, which is a standard node.js buildpack -- I'm assuming everything it does is just running npm install.
hazelsparrow
on 22 Dec 2016
It likely doesn't install devDependencies which is where react-scripts is.
gaearon
on 22 Dec 2016
@gaearon That was indeed the problem! I don't know why I haven't thought about that before. Because ENV is set to production by Heroku automatically, it doesn't install the dev dependencies.
I ended up moving everything from devDependencies to dependencies to make the build work on Heroku.
Thanks Dan, you rock! :)
hazelsparrow
on 22 Dec 2016
@gaearon Yes it is :D
dvkndn
on 23 Dec 2016
Maybe we should do this by default? I don't know if this is a common problem or not.
gaearon
on 23 Dec 2016
@gaearon assuming you're talking about moving react-scripts out of devDependencies and not the case sensitivity issue mentioned earlier, I think it would be a good idea. I don't know either whether this is a common problem but it is indeed a problem for every developer trying to run a production build outside a dev environment. The only other alternative to doing that would be running a production build on local and adding the build/ folder to the repository, but I would imagine more companies/developers than not would prefer to build this automatically on a CI server.
hazelsparrow
on 28 Dec 2016
Related issues
wereHamster
·
3Comments
rdamian3
·
3Comments
stopachka
·
3Comments
oltsa
·
3Comments
JimmyLv
·
3Comments