Important
- This Article supposes you working with the nuxt-express starter template. But I think it's a global issue that might happen with React and Next or may happen in general.
- You can go to the solution section and you will be good to go. The rest is just if you are interested enough.
Boring talk
It's a weird problem that turned my life into hell for long long time. NPM doesn't install the dependencies. For some reason I like Heroku, simple and just work. But when I started to use Nuxt with express and deploy the app to Heroku I started to get this issue. Every time I spend the whole day tying to figure out what did I do to make this happen but I did nothing. A normal deployment. And then I create a new project, copy all the logic from the old project to the new one and install the same packages. and sometimes it doesn't work as well so I create a new app in Heroku and do the same thing again and again till it work. Sometimes I go with another solutions -like Vercel or Portal Azure- but it doesn't feel like home if you know what i mean. But today I figured out a way to solve this issue finally.
Why this happens?
I don't know exactly why this happens lol. But after I read Heroku Node.js support I found out that Heroku doesn't run npm i
to install the dependencies instead it runs npm ci
.
If you want to know the difference about the two you can find it here. But In short, the main differences between using npm install
and npm ci
are:
- The project must have an existing package-lock.json or npm-shrinkwrap.json.
- If dependencies in the package lock do not match those in package.json, npm ci will exit with an error, instead of updating the package lock.
- npm ci can only install entire projects at a time: individual dependencies cannot be added with this command.
- If a node_modules is already present, it will be automatically removed before npm ci begins its install.
- It will never write to package.json or any of the package-locks: installs are essentially frozen.
So I configured Heroku to use npm i
and also disabled cache to make sure every time I deploy the app it reinstall everything.
The solution
First of all I specified my Node and NPM versions in my package.json
you can know the exact versions with those commands:
for Node:
node -v
and for NPM:
npm -v
then in add both of them in your package.json
like this:
"engines": {
"npm": <Your npm version>,
"node": <Your node version>
}
As I said before you need to configure Heroku to use npm i
instead of npm ci
and to disable Heroku Cache. you can do this in two ways.
-
The first one you can use the Heroku CLI :
1- Make sure you're logged in with your Heroku account
heroku login
2- Use these commands to do the trick
$ heroku config:set USE_NPM_INSTALL=true -a <Your app name> $ heroku config:set NODE_MODULES_CACHE=false -a <Your app name>
-
The second way is to do it from Heroku itself
1- Go to your app in Heroku and in the Settings tab
2- scroll to 'reveal config vars' button
index | key | value |
---|---|---|
1 | NODE_MODULES_CACHE | false |
2 | USE_NPM_INSTALL | true |
you should end up with something like this
Don't forget to add your other env variables :)
I wish this ends the suffer.
Top comments (2)
Thank you very much you save my time.
Glad to hear that 💙