Webpack @ alias not working in app - only when running npm run prod on Forge

@Sinnbeck Thank you for your response! I looked a bit and I don't see anything like that at a glance but I may have to just go through and audit every filename and import. This error displays about 180 times, I don't think I'd have made 180 typos (I would hope). This is a great idea to check this though. Please, let me know if there is anything else that comes to mind.

@fylzero My other idea is that your alias is somehow breaking. You can as a test, try and change just one of the failing imports to use a relative path instead

@Sinnbeck I'm about 99% sure that's what the problem is. I just can't think of how or why the alias would be broken. I feel like this is going to be a silly thing.

Also clearly has to be environment related.

@Sinnbeck I tried your suggestion and sent up a few relative paths - tested locally, worked fine... deploy failed with the same amount of errors. Maybe this is not the alias after all?

ERROR in ./resources/js/Layouts/NavLowerDesktop.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Layouts/NavLowerDesktop.vue?vue&type=script&lang=js) 2:0-58
Module not found: Error: Can't resolve '../Components/JumpToTicket.vue' in '/home/forge/{site url hidden}.com/resources/js/Layouts'

I guess this means imports are broken regardless of using an alias.

@fylzero Can you show how you are importing in "/home/forge/{site url hidden}.com/resources/js/Layouts" ?

@Sinnbeck Sure. Here is my NavLowerDesktop.vue file - shortened for the example.

<template>
    <nav class="hidden print:hidden lg:block fixed w-full z-30 bg-white drop-shadow-md" style="top: 48px">
        <div class="w-full max-w-screen-2xl mx-auto flex h-9 px-6">
            <div class="grow flex items-center">

                <JumpToTicket />
                
            </div>
        </div>
    </nav>
</template>

<script>
import JumpToTicket from '@/Components/JumpToTicket.vue';

export default {
    components: {
        JumpToTicket,
    },
};
</script>

Obviously a second ago I had that changed to the correct relative path:

import JumpToTicket from '../Components/JumpToTicket.vue';

Folder structure is:

- resources/js
    - Components
    - Layouts

@fylzero That looks fine.. And the file named JumpToTicket.vue? I assume that is named that and the components folder is with an uppercase C :)

@Sinnbeck It sure is (named correctly / capitalized identically). Messed up, right?

@fylzero Totally. Weird idea. Try removing .vue from the import, and let it handle that itself.

Also I assume this is vue3? And that you wipe the node_modules and reinstall npm packages on deploy?

@Sinnbeck I'll try that. Yes, using Vue 3. Here's my deploy script.

cd /home/forge/{project url hidden}.com
$FORGE_PHP artisan down --render="errors::503"
git reset --hard HEAD
git pull origin main
$FORGE_PHP artisan config:clear
$FORGE_PHP artisan route:clear
$FORGE_COMPOSER install --no-interaction --prefer-dist --optimize-autoloader

( flock -w 10 9 || exit 1
    echo 'Restarting FPM...'; sudo -S service $FORGE_PHP_FPM reload ) 9>/tmp/fpmlock

$FORGE_PHP artisan config:cache
$FORGE_PHP artisan route:cache
npm ci
# npm run production   // <--- THIS IS WHAT I CAN'T ENABLE/GET WORKING WITHOUT ERRORS
rm -rf node_modules

if [ -f artisan ]; then
    $FORGE_PHP artisan migrate --force
fi

$FORGE_PHP artisan up

@fylzero That is indeed very very strange. Did you try logging into the server with ssh and checking if the files are actually there ?

@Sinnbeck Removing .vue from the imports didn't seem to make a difference. =T

@Sinnbeck I just did and BINGO!!!!! The components folder - at some point I changed the case and it kept the lower case version!!!!!! I think this will fix it, I just need to blow that away - brb - I'll let you know.

@fylzero Awesome. So it was indeed a casing issue. Interesting that git didnt change it :/

@Sinnbeck I've totally seen this before... the folder name just got sticky. I wound up having to use git mv twice to get it to hold.

Locally I just renamed the folder back to components then did git mv components comp the git mv comp Components

IT JUST DEPLOYED! THANK YOU! This one was driving me crazy!

@fylzero Happy to help, and great that its finally working :)