2

I'm trying to deploy a nuxt app to Heroku but it keeps failing during build. Building and starting locally works perfectly. I've tried changing the paths for the components in default.vue (@/components, ~/components, ../components) and I still get 'Can't Resolve'. Also tried multiple versions of package.json based on other threads with similar issues, but nothing seems to work.

Photo of Folder Layout

Heroku Log:

remote:        > nuxt build
remote:
remote:        ℹ Production build
remote:        ✔ Builder initialized
remote:        ✔ Nuxt files generated
remote:        ℹ Compiling Client
remote:        ✔ Client: Compiled with some errors in 42.31s
remote:
remote: Hash: a7adf710e4a9a216bdca
remote: Version: webpack 4.41.3
remote: Time: 42318ms
remote: Built at: 12/17/2019 8:05:56 PM
remote:                   Asset        Size  Chunks               Chunk Names
remote: 156549b9e5235b29714a.js  1010 bytes       2  [immutable]  pages/about
remote: 1b7901f20ace318de4e2.js    5.05 KiB       3  [immutable]  pages/index
remote: 2064a7c39737d73ecb9c.js    1.19 KiB       4  [immutable]  pages/yelpcamp
remote: 493a442905cb865c2ca1.js     294 KiB       6  [immutable]  vendors.app
remote: 519c9efdea0f9ea4ebdc.js    2.38 KiB       5  [immutable]  runtime
remote: 55c6ba3ed3fe063a3d0e.js     167 KiB       1  [immutable]  commons.app
remote:                LICENSES   510 bytes
remote: aea3489e520195a48d62.js    37.2 KiB       7  [immutable]  vendors.pages/index
remote: cbee6c8200953de76a3c.js    41.6 KiB       0  [immutable]  app
remote:         img/0288f57.jpg     233 KiB
remote:         img/db28ad7.jpg    97.5 KiB
remote: Entrypoint app = 519c9efdea0f9ea4ebdc.js 55c6ba3ed3fe063a3d0e.js 493a442905cb865c2ca1.js cbee6c8200953de76a3c.js
remote:
remote: ERROR in ./layouts/default.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vuetify-loader/lib/loader.js??ref--16-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/default.vue?vue&type=script&lang=js&)
remote: Module not found: Error: Can't resolve '../components/Navbar.vue' in '/tmp/build_28a528eb014098870414a8a1afe75600/layouts'
remote:  @ ./layouts/default.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vuetify-loader/lib/loader.js??ref--16-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/default.vue?vue&type=script&lang=js&) 13:0-46 19:12-18
remote:  @ ./layouts/default.vue?vue&type=script&lang=js&
remote:  @ ./layouts/default.vue
remote:  @ ./.nuxt/App.js
remote:  @ ./.nuxt/index.js
remote:  @ ./.nuxt/client.js
remote:  @ multi ./.nuxt/client.js
remote:
remote:  FATAL  Nuxt build error
remote:
remote:   at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:5314:21)
remote:   at runMicrotasks (<anonymous>)
remote:   at processTicksAndRejections (internal/process/task_queues.js:97:5)
remote:   at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:5263:5)
remote:   at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:5597:5)
remote:   at async Object.run (node_modules/@nuxt/cli/dist/cli-build.js:100:7)
remote:   at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-command.js:2575:7)
remote:
remote: tput: No value for $TERM and no -T specified
remote:
remote:    ╭─────────────────────────────╮
remote:    │                             │
remote:    │   ✖ Nuxt Fatal Error        │
remote:    │                             │
remote:    │   Error: Nuxt build error   │
remote:    │                             │
remote:    ╰─────────────────────────────╯
remote:
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! daltondayton@1.0.0 build: `nuxt build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the daltondayton@1.0.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.sAakk/_logs/2019-12-17T20_05_56_620Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! daltondayton@1.0.0 heroku-postbuild: `npm run build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the daltondayton@1.0.0 heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.sAakk/_logs/2019-12-17T20_05_56_636Z-debug.log
remote:
remote: -----> Build failed
remote:
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote:        If you're stuck, please submit a ticket so we can help:
remote:        https://help.heroku.com/
remote:
remote:        Love,
remote:        Heroku
remote:
remote:  !     Push rejected, failed to compile Node.js app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !       Push rejected to daltondayton.
remote:
To https://git.heroku.com/daltondayton.git
 ! [remote rejected] master -> master (pre-receive hook declined)

Package.json

{
  "name": "daltondayton",
  "version": "1.0.0",
  "description": "daltondayton.com",
  "engines": {
    "node": "13.3.0"
  },
  "author": "Dalton Dayton",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "heroku-postbuild": "npm run build",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "nuxt": "^2.10.2",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.0.0",
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-module": "^1.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.1.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-prettier": "^3.0.1",
    "prettier": "^1.16.4"
  }
}

Procfile:

web: npm run build && npm start -- --port $PORT
Dalton Dayton
  • 21
  • 2

1 Answers1

1

Did you happen to change the components' names in a case-sensitive only way?

Example: from fonts.vue to Fonts.vue.

I've run into a similar issue when deploying my nuxt project on Heroku. It seems that it has to do with mac OS being a case insensitive environment.

I was able to solve it by following these steps:

 git mv fonts.vue fonts2.vue
 git mv fonts2.vue Fonts.vue
 git commit -m "changed case of file"

Notice that I had to change to fonts2.vue initially so that the case-sensitive renaming takes place effectively.

Here's the SO answer explaining the solution to this problem.

Miguel Marques
  • 29
  • 1
  • 7