Heroku build failed after a successful deployment - heroku

I was deploying to Heroku regularly and everything used to work just fine. Then, after changing just one line of code and pushing it to Heroku is failing.
I have not updated or installed anything. This behavior seems too odd for me.
\-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): 12.18.1
engines.npm (package.json): unspecified (use default)
Resolving node version 12.18.1...
Downloading and installing node 12.18.1...
Using default npm version: 6.14.5
-----> Restoring cache
- node_modules
-----> Installing dependencies
Installing node modules
> fsevents#1.2.9 install /tmp/build_afdd9f79/node_modules/fsevents
> node install
npm ERR! Cannot read property 'length' of undefined
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.Lt04X/_logs/2020-09-10T20_50_40_685Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
The package.json is as following:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"build": "npm run production",
"postinstall": "npm run prod",
"heroku-postbuild": "npm run prod"
},
"devDependencies": {
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.2.2",
"cross-env": "^5.1",
"jquery": "^3.5.1",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.16.1",
"resolve-url-loader": "^2.3.1",
"sass": "^1.26.9",
"sass-loader": "7.*",
"vue": "^2.6.11",
"vue-template-compiler": "^2.6.11"
},
"dependencies": {
"#chenfengyuan/vue-number-input": "^1.2.1",
"country-list": "^2.2.0",
"moment": "^2.27.0",
"vue-cool-lightbox": "^2.5.1",
"vue-loading-overlay": "^3.3.2",
"vue-moment": "^4.1.0",
"vue-recaptcha": "^1.3.0",
"vue-resource": "^1.5.1",
"vue-router": "^3.3.4",
"vue-select": "^3.10.3",
"vue-stripe-elements-plus": "^0.3.2",
"vuex": "^3.4.0"
},
"engines": {
"node": "12.18.1"
}
}
What can be the possible cause for this?

Although not strictly a solution to the problem, I was able to get past this error by migrating my project to Yarn.

I got it working by eliminating the "postinstall" script and just using this line:
"heroku-postbuild": "npm run production"

Related

SASS dependency not found in Laravel and Vue.js project

I inherited a Laravel project that uses Vue.js as the front end. However, I can't seem to get things to work.
Here are the commands I executed:
john#mail:~/$ cd ~/html/app
john#mail:~/html/app$ composer install
john#mail:~/html/app$ php artisan migrate ---> at this point the website is viewable, so i guess all the npm resources were already compiled with the project
john#mail:~/html/app$ npm install
john#mail:~/html/app$ npm run watch
But the last command yielded the results below.
# watch /var/www/html/app cross-env NODE_ENV=development
node_modules/webpack/bin/webpack.js --watch --progress --hide-modules
--config=node_modules/laravel-mix/setup/webpack.config.js
10% building modules 1/1 modules 0 active Webpack is watching the
files…
95% emitting ERROR Failed to compile
with 14 errors
7:16:18 PM
This dependency was not found:
/var/www/html/app/resources/assets/sass/app.scss in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
To install it, you can run: npm install --save
/var/www/html/app/resources/assets/sass/app.scss
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.17",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.1.3",
"jquery": "^3.2",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"node-sass": "^6.0.1",
"sass": "^1.35.1",
"sass-loader": "^12.1.0",
"vue": "^2.5.7"
},
"dependencies": {
"foundation": "^4.2.1-1",
"jquery-ui": "^1.12.1",
"lang.js": "^1.1.14",
"slick-carousel": "^1.8.1"
}
}
Any ideas how I can resolve this issue? To me, the instruction to npm install --save /var/www/html/app/resources/assets/sass/app.scss doesn't seem right.
You have eight outdated packages in your package.json. You may want to start there and see what errors if any, come next.
axios ^0.17 → ^0.21
bootstrap-sass ^3.3.7 → ^3.4.1
cross-env ^5.1.3 → ^7.0.3
jquery ^3.2 → ^3.6
laravel-mix ^1.0 → ^6.0
lodash ^4.17.4 → ^4.17.21
sass ^1.35.1 → ^1.35.2
vue ^2.5.7 → ^2.6.14
Update your package.json with the following and then run npm run prod.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"bootstrap-sass": "^3.4.1",
"cross-env": "^7.0.3",
"foundation": "^4.2.1-1",
"jquery": "^3.6",
"jquery-ui": "^1.12.1",
"lang.js": "^1.1.14",
"laravel-mix": "^6.0",
"lodash": "^4.17.21",
"node-sass": "^6.0.1",
"resolve-url-loader": "^4.0.0",
"sass": "^1.35.2",
"sass-loader": "^12.1.0",
"slick-carousel": "^1.8.1",
"vue": "^2.6.14"
}
}

npm run dev is not working in Laravel 7 project

I am working with Laravel 7, installed auth bootstrap and ran npm install command as well. After I ran npm run dev command the following error messages occurred:
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
[webpack-cli] Error: Unknown option '--hide-modules'
[webpack-cli] Run 'webpack --help' to see available commands and options
How could I fix this problem?
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.21.1",
"bootstrap": "^4.0.0",
"cross-env": "^7.0",
"jquery": "^3.2",
"laravel-mix": "^6.0.25",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"resolve-url-loader": "^3.1.0",
"webpack": "^5.23.0"
}
}
I had the same problem and I solved it with below steps:
add "webpack": "^5.23.0" in package.json
run commands:
npm uninstall sass
npm uninstall sass-loader
rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
npm install
after that npm run dev worked properly.

laravel npm run watch does not compile Sass file into CSS

I have a Laravel project where I'm trying to compile Sass into CSS using npm run watch, but I'm getting the following error in terminal log: [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
configuration.entry['/js/app'] should not contain the item 'D:\xampp\htdocs\laravel\epood5\resources\js\app.js' twice.
-> All modules are loaded upon startup. The last one is exported.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! epood4#1.0.0 development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the epood4#1.0.0 development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Rasmus\AppData\Roaming\npm-cache_logs\2021-04-04T15_18_53_974Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! epood4#1.0.0 watch: npm run development -- --watch
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the epood4#1.0.0 watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Rasmus\AppData\Roaming\npm-cache_logs\2021-04-04T15_18_54_007Z-debug.log
RESOURCES/JS/APP.JS
require('./bootstrap');
require('alpinejs');
PACKAGE.JSON
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#tailwindcss/forms": "^0.2.1",
"#tailwindcss/typography": "^0.3.0",
"alpinejs": "^2.7.3",
"autoprefixer": "^10.0.2",
"axios": "^0.21.1",
"bootstrap": "^4.0.0",
"cross-env": "^7.0.3",
"jquery": "^3.2",
"laravel-mix": "^6.0.11",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"resolve-url-loader": "^3.1.0",
"sass": "^1.15.2",
"sass-loader": "^8.0.0",
"tailwindcss": "^2.0.1",
"vue-template-compiler": "^2.6.12",
"webpack-cli": "^4.5.0"
},
"name": "epood4",
"description": "<p align=\"center\"><img src=\"https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg\" width=\"400\"></p>",
"version": "1.0.0",
"main": "webpack.mix.js",
"directories": {
"test": "tests"
},
"dependencies": [],
"keywords": [],
"author": "",
"license": "ISC"
}
I see you have a recent version of Laravel Mix which is good, however, you haven't updated the "scripts." I would still need to see webpack.mix.js. For now, you can update your package.json to the following and look harder into your app.js and webpack.mix.js.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#tailwindcss/forms": "^0.3.2",
"#tailwindcss/typography": "^0.4.0",
"alpinejs": "^2.8.2",
"autoprefixer": "^10.2.5",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"cross-env": "^7.0.3",
"jquery": "^3.6",
"laravel-mix": "^6.0.18",
"lodash": "^4.17.21",
"popper.js": "^1.12",
"postcss": "^8.2.13",
"postcss-import": "^14.0.1",
"resolve-url-loader": "^3.1.3",
"sass": "^1.32.12",
"sass-loader": "^11.0.1",
"tailwindcss": "^2.1.2",
"vue-template-compiler": "^2.6.12",
"webpack-cli": "^4.6.0"
}
}

Laravel mix scripts not watching changes

Im using webpack to run a watch on .js files being changed, but I need to use wildcards instead of specific file names for my project. I'm currently using the commands below and it works fine and compiles all the expected files when I run npm run watch, but it will never run again after I make a change directly in any of the files. I have to stop watching and re-run the same command again and again. Is there something I am missing?
const mix = require('laravel-mix');
mix.scripts([
'resources/js/vendor/**/*.js',
'resources/js/modules/**/*.js',
'resources/js/plugins/**/*.js'
], 'public/js/site.js');
Package file:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"autoprefixer": "^9.7.6",
"bulma": "^0.9.0",
"cross-env": "^5.1",
"laravel-mix": "^4.0",
"laravel-mix-purgecss": "^4.1.0",
"node-sass": "^4.14.1",
"postcss-import": "^12.0.1",
"postcss-nested": "^4.2.1",
"postcss-preset-env": "^6.7.0",
"resolve-url-loader": "^3.1.0",
"sass": "^1.26.10",
"sass-loader": "^7.1.0",
"tailwindcss": "^1.3.5",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.44.1"
},
"dependencies": {}
}
Edit your package.json file - change this:
"watch": "npm run development -- --watch",
To this:
"watch": "node_modules/.bin/webpack --watch --watch-poll --config=node_modules/laravel-mix/setup/webpack.config.js",

Npm - .jsTypeError: dep.getResourceIdentifier is not a function

When I run npm run watch or npm run dev I get the following error:
# watch /Applications/MAMP/htdocs/stock
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js 10% building modules 1/1 modules 0 active. Webpack is watching the files…
10% building modules 6/8 modules 2 active
…/stock/resources/assets/js/bootstrap.jsTypeError:
dep.getResourceIdentifier is not a function
at addDependency (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/Compilation.js:402:30)
at iterationOfArrayCallback (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/Compilation.js:88:3)
at addDependenciesBlock (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/Compilation.js:422:5)
at Compilation.processModuleDependencies (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/Compilation.js:433:4)
at afterBuild (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/Compilation.js:560:16)
at _this.buildModule.err (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/Compilation.js:606:11)
at callback (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/Compilation.js:357:35)
at module.build.error (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/Compilation.js:393:12)
at handleParseResult (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/NormalModule.js:369:12)
at doBuild.err (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/NormalModule.js:391:6)
at runLoaders (/Applications/MAMP/htdocs/stock/node_modules/webpack/lib/NormalModule.js:270:12)
at /Applications/MAMP/htdocs/stock/node_modules/loader-runner/lib/LoaderRunner.js:370:3
at iterateNormalLoaders (/Applications/MAMP/htdocs/stock/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
at Array. (/Applications/MAMP/htdocs/stock/node_modules/loader-runner/lib/LoaderRunner.js:202:4)
at Storage.finished (/Applications/MAMP/htdocs/stock/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
at provider (/Applications/MAMP/htdocs/stock/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
at /Applications/MAMP/htdocs/stock/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:532:3) ^C%
I’ve tried to reinstall npm and tried to switch back to a lower npm/webpack version but that didn’t help.
Deleted the node_modules and did npm cache clean --force + npm install but that didn't work as well.
The last thing I did before this error came up was install sass loader, to fix an error with sass.
When I delete the sass loader I still getting this error.
My package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"cross-env": "^5.1.4",
"file-loader": "^1.1.11",
"laravel-mix": "^2.1.1",
"node-sass": "^4.8.3",
"popper.js": "^1.14.3",
"sass-loader": "^6.0.7",
"vue": "^2.5.16",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14"
},
"dependencies": {
"bootstrap": "^4.0.0-beta",
"bootstrap-sass": "^3.3.7",
"bootstrap-vue": "^2.0.0-rc.6",
"css-loader": "^0.28.11",
"font-awesome": "^4.7.0",
"ionicons": "^3.0.0",
"iview": "^2.12.0",
"jquery": "^3.3.1",
"js-cookie": "^2.2.0",
"less": "^3.0.1",
"less-loader": "^4.1.0",
"npm-watch": "^0.3.0",
"vue-i18n": "^7.6.0",
"vue-resource": "^1.5.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
}
}
My webpack.mix.js:
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Node version: v9.8.0
Npm version: 5.8.0
OS: MacOS Sierra 10.12.5
Laravel framework: 5.4.36

Resources