Search code examples
vue.jsherokupackage.jsonvue-cliheroku-postgres

Deployment Failure on Heroku: Vue-CLI Build Errors

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
Solution

  • 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