Deployment Heroku, Build stopping after webpack bundles on heroku? - node.js

Question

Not sure how to set up my environment to get my MERN application deployed on Heroku. I'm using EJS and webpack. When I deploy the application it is currently staying stuck at the webpack build phase:
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 12.18.3
engines.npm (package.json): unspecified (use default)
Resolving node version 12.18.3...
Downloading and installing node 12.18.3...
Using default npm version: 6.14.6
-----> Restoring cache
Cached directories were not restored due to a change in version of node, npm, yarn or stack
Module installation may take longer for this build
-----> Installing dependencies
Installing node modules
> fsevents#1.2.13 install /tmp/build_31a40992/node_modules/nodemon/node_modules/fsevents
> node install.js
Skipping 'fsevents' build as platform linux is not supported
> nodemon#1.19.4 postinstall /tmp/build_31a40992/node_modules/nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate
> bcrypt#5.0.1 install /tmp/build_31a40992/node_modules/bcrypt
> node-pre-gyp install --fallback-to-build
[bcrypt] Success: "/tmp/build_31a40992/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node" is installed via remote
added 1003 packages in 7.872s
-----> Build
Running build
> project#1.0.0 build /tmp/build_31a40992
> webpack --mode production
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist#latest --update-db
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
asset App.js 592 KiB [compared for emit] [minimized] [big] (name: main) 1 related asset
orphan modules 10.6 KiB [orphan] 3 modules
runtime modules 663 bytes 3 modules
modules by path ./node_modules/ 142 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB 2 modules
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 18.3 KiB
./src/App.jsx + 3 modules 17.2 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/PricesComponent.css 1.1 KiB [built] [code generated]
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
App.js (592 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (583 KiB)
BuyOrders.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
webpack 5.67.0 compiled with 3 warnings in 33959 ms
asset Edit.js 580 KiB [compared for emit] [minimized] [big] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
orphan modules 1.13 KiB [orphan] 1 module
modules by path ./node_modules/ 142 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB 2 modules
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 14.8 KiB
./src/AppDep/Edit.jsx + 1 modules 12.2 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Edit.css 2.64 KiB [built] [code generated]
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
Edit.js (580 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (580 KiB)
Edit.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
webpack 5.67.0 compiled with 3 warnings in 33955 ms
asset MakeBuy.js 572 KiB [compared for emit] [minimized] [big] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
orphan modules 1.13 KiB [orphan] 1 module
modules by path ./node_modules/ 142 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB 2 modules
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 9.07 KiB
./src/AppDep/MakeBuy.jsx + 1 modules 8.12 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Make.css 975 bytes [built] [code generated]
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
MakeBuy.js (572 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (572 KiB)
MakeBuy.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
webpack 5.67.0 compiled with 3 warnings in 33960 ms
asset MakeSell.js 572 KiB [compared for emit] [minimized] [big] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
orphan modules 1.13 KiB [orphan] 1 module
modules by path ./node_modules/ 142 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB 2 modules
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 9.48 KiB
./src/AppDep/MakeSell.jsx + 1 modules 8.53 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Make.css 975 bytes [built] [code generated]
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
MakeSell.js (572 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (572 KiB)
MakeSell.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
webpack 5.67.0 compiled with 3 warnings in 34225 ms
asset MyOrders.js 665 KiB [compared for emit] [minimized] [big] (name: main) 1 related asset
orphan modules 531 KiB [orphan] 266 modules
runtime modules 663 bytes 3 modules
cacheable modules 212 KiB
modules by path ./node_modules/ 142 KiB 15 modules
modules by path ./src/ 70.3 KiB
./src/AppDep/MyOrders.jsx + 12 modules 59.7 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/MyOrders.css 1.11 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Order.css 710 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Matches.css 1.17 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Edit.css 2.64 KiB [built] [code generated]
+ 2 modules
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
MyOrders.js (665 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (665 KiB)
MyOrders.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
webpack 5.67.0 compiled with 3 warnings in 37873 ms
asset Order.js 603 KiB [compared for emit] [minimized] [big] (name: main) 1 related asset
orphan modules 501 KiB [orphan] 259 modules
runtime modules 663 bytes 3 modules
cacheable modules 174 KiB
modules by path ./node_modules/ 142 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
+ 1 module
modules by path ./src/ 32.8 KiB
./src/AppDep/Order.jsx + 5 modules 26.8 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Order.css 710 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Edit.css 2.64 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Form.css 2.71 KiB [built] [code generated]
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
Order.js (603 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (603 KiB)
Order.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
webpack 5.67.0 compiled with 3 warnings in 37116 ms
asset Prices.js 34.5 KiB [compared for emit] [minimized] (name: main) 1 related asset
modules by path ./node_modules/react/ 6.48 KiB
./node_modules/react/index.js 190 bytes [built] [code generated]
./node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]
./src/AppDep/Prices.jsx 3.99 KiB [built] [code generated]
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
webpack 5.67.0 compiled successfully in 11248 ms
asset PricesComponent.js 69 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
orphan modules 5.14 KiB [orphan] 2 modules
modules by path ./node_modules/ 17.4 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB
./node_modules/react/index.js 190 bytes [built] [code generated]
./node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB
./node_modules/css-loader/dist/runtime/cssWithMappingToString.js 2.28 KiB [built] [code generated]
./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 11.7 KiB
./src/AppDep/PricesComponent.jsx + 2 modules 10.6 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/PricesComponent.css 1.1 KiB [built] [code generated]
webpack 5.67.0 compiled successfully in 11402 ms
asset SellOrders.js 583 KiB [compared for emit] [minimized] [big] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
orphan modules 6.42 KiB [orphan] 2 modules
modules by path ./node_modules/ 142 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB 2 modules
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 20 KiB
./src/AppDep/SellOrders.jsx + 2 modules 17.4 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/SellOrders.css 2.6 KiB [built] [code generated]
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
SellOrders.js (583 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (583 KiB)
SellOrders.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
webpack 5.67.0 compiled with 3 warnings in 33961 ms
asset Navigation.js 75.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
orphan modules 1.15 KiB [orphan] 1 module
modules by path ./node_modules/ 17.4 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB
./node_modules/react/index.js 190 bytes [built] [code generated]
./node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB
./node_modules/css-loader/dist/runtime/cssWithMappingToString.js 2.28 KiB [built] [code generated]
./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 11 KiB
./src/AppDep/Navigation.jsx + 1 modules 6.73 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/Navigation.css 4.27 KiB [built] [code generated]
webpack 5.67.0 compiled successfully in 11400 ms
asset MatcheRow.js 69.4 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
orphan modules 1.14 KiB [orphan] 1 module
modules by path ./node_modules/ 17.4 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
modules by path ./node_modules/react/ 6.48 KiB
./node_modules/react/index.js 190 bytes [built] [code generated]
./node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB
./node_modules/css-loader/dist/runtime/cssWithMappingToString.js 2.28 KiB [built] [code generated]
./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 8.09 KiB
./src/AppDep/MatcheRow.jsx + 1 modules 5.82 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/styles/MatcheRow.css 2.27 KiB [built] [code generated]
webpack 5.67.0 compiled successfully in 11399 ms
So ... webpack 5.67.0 compiled successfully in 11399 ms
but ... I ideally want to run
npm run server
after the build.
As a reference a successful MERN deployment on heroku should look like this:
-----> Building on the Heroku-20 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 14.x...
Downloading and installing node 14.18.3...
Using default npm version: 6.14.15
-----> Installing dependencies
Installing node modules
added 538 packages in 5.08s
-----> Build
Running build
> deploy-react-webpack#1.0.0 build /tmp/build_8c86a15a
> webpack --mode production
asset main.js 129 KiB [emitted] [minimized] (name: main) 1 related asset
asset ./index.html 278 bytes [emitted]
modules by path ./node_modules/react/ 6.48 KiB
./node_modules/react/index.js 190 bytes [built] [code generated]
./node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]
modules by path ./node_modules/react-dom/ 119 KiB
./node_modules/react-dom/index.js 1.33 KiB [built] [code generated]
./node_modules/react-dom/cjs/react-dom.production.min.js 118 KiB [built] [code generated]
modules by path ./node_modules/scheduler/ 4.91 KiB
./node_modules/scheduler/index.js 198 bytes [built] [code generated]
./node_modules/scheduler/cjs/scheduler.production.min.js 4.72 KiB [built] [code generated]
./src/index.js 3.64 KiB [built] [code generated]
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
webpack 5.67.0 compiled successfully in 3745 ms
-----> Caching build
- node_modules
-----> Pruning devDependencies
removed 473 packages and audited 64 packages in 2.943s
2 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
-----> Build succeeded!
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 34.2M
-----> Launching...
Released v3
https://morning-sands-39344.herokuapp.com/ deployed to Heroku
Any ideas what is the issue?
These are my main setup files
webpack.config.js
const path = require('path')
// module.exports = {
// entry: './public/App.js',
// output: {
// filename: 'App.js',
// path: path.resolve(__dirname, 'dist'),
// },
// watch: true,
// mode: 'development',
// }
var config = {
watch: true,
mode: 'development',
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: [/\.js$/, /\.jsx$/],
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: [
["#babel/preset-env", {
"targets": {
"ie": "11",
"edge": "15",
"safari": "10",
"firefox": "50",
"chrome": "49"
}
}],
"#babel/preset-react"
]
}
}
}
]
},
devtool : 'inline-source-map',
};
var fooConfig = Object.assign({}, config, {
//name: "a",
entry: './src/App.jsx',
output: {
filename: 'App.js',
path: path.resolve(__dirname, 'public/dist'),
},
});
var barConfig = Object.assign({}, config,{
entry: './src/Databases.jsx',
output: {
filename: 'Databases.js',
path: path.resolve(__dirname, 'public/dist'),
},
});
var booConfig = Object.assign({}, config,{
entry: './src/Matches.jsx',
output: {
filename: 'Matches.js',
path: path.resolve(__dirname, 'public/dist'),
},
});
var Config1 = Object.assign({}, config,{
entry: './src/AppDep/BuyOrders.jsx',
output: {
filename: 'BuyOrders.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config2 = Object.assign({}, config,{
entry: './src/AppDep/Edit.jsx',
output: {
filename: 'Edit.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config3 = Object.assign({}, config,{
entry: './src/AppDep/MakeBuy.jsx',
output: {
filename: 'MakeBuy.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config4 = Object.assign({}, config,{
entry: './src/AppDep/MakeSell.jsx',
output: {
filename: 'MakeSell.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config5 = Object.assign({}, config,{
entry: './src/AppDep/MyOrders.jsx',
output: {
filename: 'MyOrders.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config6 = Object.assign({}, config,{
entry: './src/AppDep/Order.jsx',
output: {
filename: 'Order.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config7 = Object.assign({}, config,{
entry: './src/AppDep/Prices.jsx',
output: {
filename: 'Prices.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config8 = Object.assign({}, config,{
entry: './src/AppDep/PricesComponent.jsx',
output: {
filename: 'PricesComponent.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config9 = Object.assign({}, config,{
entry: './src/AppDep/SellOrders.jsx',
output: {
filename: 'SellOrders.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config10 = Object.assign({}, config,{
entry: './src/AppDep/Navigation.jsx',
output: {
filename: 'Navigation.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
var Config11 = Object.assign({}, config,{
entry: './src/AppDep/MatcheRow.jsx',
output: {
filename: 'MatcheRow.js',
path: path.resolve(__dirname, 'public/dist/AppDep'),
},
});
// Return Array of Configurations
module.exports = [
fooConfig, barConfig, booConfig, Config1, Config2, Config3, Config4, Config5, Config6, Config7, Config8, Config9, Config10, Config11
];
Thanks

Answer 1

Heroku uses Procfiles or the start command to start your server. Add a start command at the script section in your package.json that points to your nodejs server.
"script": {
"start": "node pathtoyourserver.js"
}
Or you can add a Procfile
web: node pathtoyourserver.js
or use your npm command
web: npm run server
https://devcenter.heroku.com/articles/nodejs-support