Deployment Failure on Heroku: Vue-CLI Build Errors

Question

I am encountering persistent issues with deploying my Node.js application, which includes a Vue.js frontend, on Heroku. Despite multiple attempts and varying configurations, my builds consistently fail, primarily due to module resolution errors.

Application Details:

App Name: ctms
Build Stack: Heroku-22
Language/Framework: Node.js with Vue.js (Frontend)

Summary:

During the build process, several errors occur related to module resolution. Notably, modules such as 'axios', 'vue-router', and 'bootstrap/dist/css/bootstrap.min.css' are reported as not found, even though they are declared in my package.json dependencies. Here are some examples of the errors:

Module not found: Error: Can't resolve 'axios' in '/tmp/build_xxxxx/frontend/src'
Module not found: Error: Can't resolve 'bootstrap/dist/css/bootstrap.min.css' in '/tmp/build_xxxxx/frontend/src'
Module not found: Error: Can't resolve 'vue-router' in '/tmp/build_xxxxx/frontend/src/router'

Troubleshooting Completed:

Verified the presence of these modules in package.json and package-lock.json.
Ensured that all dependencies are correctly installed in the local environment.
Attempted redeployment after clearing the build cache.
Checked for potential discrepancies between local and production environments.

Here is the full build error log

----> Building on the Heroku-22 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_PRODUCTION=false
       NPM_CONFIG_LOGLEVEL=error
       USE_NPM_INSTALL=true
       NODE_VERBOSE=false
       NODE_ENV=development
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  20.10.0
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 20.10.0...
       Downloading and installing node 20.10.0...
       Using default npm version: 10.2.3
       
-----> Installing dependencies
       Installing node modules (package.json + package-lock)
       
       > [email protected] postinstall
       > npm run build --prefix frontend
       
       
       > [email protected] build
       > vue-cli-service build
       
       All browser targets in the browserslist configuration have supported ES module.
       Therefore we don't build two separate bundles for differential loading.
       
       
       -  Building for production...
        ERROR  Failed to compile with 5 errors9:22:32 PM
       
        error  in ./src/authService.js
       
       Module not found: Error: Can't resolve 'axios' in '/tmp/build_f2759173/frontend/src'
       
        error  in ./src/authService.js
       
       Module not found: Error: Can't resolve 'jwt-decode' in '/tmp/build_f2759173/frontend/src'
       
        error  in ./src/main.js
       
       Module not found: Error: Can't resolve 'bootstrap/dist/css/bootstrap.min.css' in '/tmp/build_f2759173/frontend/src'
       
        error  in ./src/router/index.js
       
       Module not found: Error: Can't resolve 'vue-router' in '/tmp/build_f2759173/frontend/src/router'
       
        error  in ./src/views/LogView.vue?vue&type=script&lang=js
       
       Module not found: Error: Can't resolve 'axios' in '/tmp/build_f2759173/frontend/src/views'
       
        ERROR  Error: Build failed with errors.
       Error: Build failed with errors.
           at /tmp/build_f2759173/node_modules/@vue/cli-service/lib/commands/build/index.js:207:23
           at /tmp/build_f2759173/node_modules/webpack/lib/webpack.js:157:8
           at /tmp/build_f2759173/node_modules/webpack/lib/HookWebpackError.js:68:3
           at Hook.eval [as callAsync] (eval at create (/tmp/build_f2759173/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
           at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/tmp/build_f2759173/node_modules/tapable/lib/Hook.js:18:14)
           at Cache.shutdown (/tmp/build_f2759173/node_modules/webpack/lib/Cache.js:150:23)
           at /tmp/build_f2759173/node_modules/webpack/lib/Compiler.js:1229:15
           at Hook.eval [as callAsync] (eval at create (/tmp/build_f2759173/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
           at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/tmp/build_f2759173/node_modules/tapable/lib/Hook.js:18:14)
           at Compiler.close (/tmp/build_f2759173/node_modules/webpack/lib/Compiler.js:1222:23)
       npm notice 
       npm notice New patch version of npm available! 10.2.3 -> 10.2.5
       npm notice Changelog: <https://github.com/npm/cli/releases/tag/v10.2.5>
       npm notice Run `npm install -g [email protected]` to update!
       npm notice 
       npm ERR! code 1
       npm ERR! path /tmp/build_f2759173
       npm ERR! command failed
       npm ERR! command sh -c npm run build --prefix frontend
       
       npm ERR! A complete log of this run can be found in: /tmp/npmcache.8K3RC/_logs/2024-01-08T21_22_04_505Z-debug-0.log
-----> Build failed
       
 !     Push rejected, failed to compile Node.js app.
 !     Push failed

Jay · Accepted Answer · 2024-01-09 19:50:32Z

Not sure exactly what happened, but it's now deploying successfully.

Likely a combination of running npm install on the frontend again, clearing the heroku cache and also changing part of the script in the root package.json.

Successful build log

-----> Building on the Heroku-22 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_PRODUCTION=false
       NPM_CONFIG_LOGLEVEL=error
       USE_NPM_INSTALL=true
       NODE_VERBOSE=false
       NODE_ENV=development
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  20.10.0
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 20.10.0...
       Downloading and installing node 20.10.0...
       Using default npm version: 10.2.3
       
-----> Installing dependencies
       Installing node modules (package.json + package-lock)
       
       > [email protected] postinstall
       > cd frontend && npm install && npm run build
       
       
       added 883 packages, and audited 884 packages in 10s
       
       110 packages are looking for funding
         run `npm fund` for details
       
       4 moderate severity vulnerabilities
       
       To address all issues (including breaking changes), run:
         npm audit fix --force
       
       Run `npm audit` for details.
       
       > [email protected] build
       > vue-cli-service build
       
       All browser targets in the browserslist configuration have supported ES module.
       Therefore we don't build two separate bundles for differential loading.
       
       
       -  Building for production...
        DONE  Compiled successfully in 2322ms6:55:41 PM
       
         File                        Size                    Gzipped
       
         dist/js/chunk-vendors.js    957.18 KiB              185.28 KiB
         dist/js/app.js              343.72 KiB              28.89 KiB
       
         Images and other types of assets omitted.
     
       
        DONE  Build complete. The dist directory is ready to be deployed.
        INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
              
       
       added 1599 packages, and audited 1600 packages in 37s
       
       135 packages are looking for funding
         run `npm fund` for details
       
       26 vulnerabilities (12 moderate, 12 high, 2 critical)
       
       To address issues that do not require attention, run:
         npm audit fix
       
       To address all issues possible (including breaking changes), run:
         npm audit fix --force
       
       Some issues need review, and may require choosing
       a different dependency.
       
       Run `npm audit` for details.
       npm notice 
       npm notice New patch version of npm available! 10.2.3 -> 10.2.5
       npm notice Changelog: <https://github.com/npm/cli/releases/tag/v10.2.5>
       npm notice Run `npm install -g [email protected]` to update!
       npm notice 
       
-----> Build
       Running heroku-postbuild
       
       > [email protected] heroku-postbuild
       > npm run build --prefix frontend
       
       
       > [email protected] build
       > vue-cli-service build
       
       All browser targets in the browserslist configuration have supported ES module.
       Therefore we don't build two separate bundles for differential loading.
       
       
-  Building for production...
        DONE  Compiled successfully in 2291ms6:55:45 PM
       
         File                        Size                    Gzipped
       
         dist/js/chunk-vendors.js    957.18 KiB              185.28 KiB
         dist/js/app.js              343.72 KiB              28.89 KiB
       
         Images and other types of assets omitted.
         
       
        DONE  Build complete. The dist directory is ready to be deployed.
        INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
              
       
-----> Caching build
       - node_modules
       
-----> Pruning devDependencies
       Skipping because NODE_ENV is not 'production'
       
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types -> web
-----> Compressing...
       Done: 153.1M
-----> Launching...
       Released v34

Collectives™ on Stack Overflow

Deployment Failure on Heroku: Vue-CLI Build Errors

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related