vue-cli-service build failing in heroku

Question

I have a very basic application, the default vue-cli setup + a few components and views.

The app was build vue-cli-service build works fine in local, but when I try to deploy this on heroku it fails with the following error,

Build

Running build

[email protected] build /tmp/build_9945eaec

vue-cli-service build

Building for production...

ERROR Failed to compile with 1 error4:21:05 PM

This relative module was not found:

ERROR Build failed with errors. * ../assets/Logo.png in ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"6212392d-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Header.vue?vue&type=template&id=2778e676&scoped=true& npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build: vue-cli-service build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build 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!
/tmp/npmcache.fDHth/_logs/2021-05-01T16_21_06_022Z-debug.log

-----> Build failed

EDIT:

This is very weird, the only time the build fails is when I try to add an img tag in my header component. The snippet is very straightforward,

<router-link to="/" class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-secondary rounded-full" viewBox="0 0 24 24">
        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
    </svg>
    <!-- <img class="logo" src="@/assets/Logo.png" alt="Recipe Of Hope" srcset="" /> -->
    <span class="ml-3 text-xl text-primary">Recipe of Hope</span>
</router-link>

If I uncomment the img tag, the build fails.

painotpi painotpi · Accepted Answer · 2021-05-01T23:37:20

Weirdly, vscode/git didn't change the image (from logo.png to Logo.png) when I updated it.

Turns out Mac file systems are case-insensitive but Linux/Windows are case-sensitive, the issue can be hard to track down, but once you see it a few times it's easy to spot.

The issue was due to a casing mismatch, and it worked after I changed the image name altogether and then reverted back to Logo.png.

vue-cli-service build failing in heroku

1 Answers