[SOLVED] Railway.app Laravel / Vue deployment: filepath error

I am trying to launch my laravel / vue app using vite on the platform Railway.app. I'm relatively new to hosting, however from what I have seen that this is a very quick process using this platform once you connect your git repo.

However when the build is being deployed, I am getting a file path error causing the build to fail.

I have run this locally many times using npm build, even from a fresh clone of the repo, and there is no issue when building the application. However when it runs through the Railway.app platform it comes with this error on build.

#15 [11/12] RUN  npm run build

 

#15 0.329

#15 0.329 > build

#15 0.329 > vite build --base=/

#15 0.329

 

#15 0.654 vite v5.0.12 building for production...

 

#15 0.709 transforming...

 

#15 1.023 ✓ 30 modules transformed.

 

#15 1.023 Could not resolve "../pages/SignIn.vue" from "resources/js/router/index.js"

#15 1.023 file: /app/resources/js/router/index.js

#15 1.025 error during build:

#15 1.025 RollupError: Could not resolve "../pages/SignIn.vue" from "resources/js/router/index.js"

#15 1.025     at error (file:///app/node_modules/rollup/dist/es/shared/parseAst.js:337:30)

#15 1.025     at ModuleLoader.handleInvalidResolvedId (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:18022:24)

#15 1.025     at file:///app/node_modules/rollup/dist/es/shared/node-entry.js:17982:26

#15 ERROR: process "/bin/bash -ol pipefail -c npm run build" did not complete successfully: exit code: 1

-----

> [11/12] RUN  npm run build:

0.654 vite v5.0.12 building for production...

0.709 transforming...

1.023 ✓ 30 modules transformed.

1.023 Could not resolve "../pages/SignIn.vue" from "resources/js/router/index.js"

1.023 file: /app/resources/js/router/index.js

1.025 error during build:

1.025 RollupError: Could not resolve "../pages/SignIn.vue" from "resources/js/router/index.js"

1.025     at error (file:///app/node_modules/rollup/dist/es/shared/parseAst.js:337:30)

1.025     at ModuleLoader.handleInvalidResolvedId (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:18022:24)

 

1.025     at file:///app/node_modules/rollup/dist/es/shared/node-entry.js:17982:26

-----

 

Dockerfile:25

-------------------

23 |     # build phase

24 |     COPY . /app/.

25 | >>> RUN  npm run build

26 |

27 |

-------------------

ERROR: failed to solve: process "/bin/bash -ol pipefail -c npm run build" did not complete successfully: exit code: 1

 

Error: Docker build failed

If anyone can help me out please let me know, as I have done a lot of searching and have not found any answers.

Here are some other relevant information of the code that may help, but let me know if you need any more information.

Thankyou!!

The vite config

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';

import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/bootstrap.min.css'],
            refresh: true,
        }),
        vue({
            template: {
                compilerOptions: {
                  isCustomElement: (tag) => tag.startsWith('Navigation')
                }
            }
        }),
        vuetify({
            autoImport: true, // Automatically imports Vuetify components as needed
          })
    ],
    resolve: {
        alias: {
          '@': path.resolve(__dirname, 'resources/js'),
        },
      },
});

index.js

import { createRouter, createWebHistory } from 'vue-router';

// Page components
import SignIn from '../pages/SignIn.vue'
import Register from '../pages/Register.vue'
import Request from '../pages/Request.vue'
import Congregation from '../pages/Congregation.vue';
import Territoryies from '../pages/Territories.vue';
import Territory from '../pages/Territory.vue'
import NotFound from '../pages/NotFound.vue';
import Print from '../pages/Print.vue'

// Firebase
import { getAuth, onAuthStateChanged } from 'firebase/auth'

const routes = [
{
    path:'/',
    redirect: '/territory',
    meta: {
        requiresAuth: false
    }
},
{
    path:'/sign-in',
    component: SignIn,
    meta: {
        requiresAuth: false
    }
},
{
    path:'/register',
    component: Register,
    meta: {
        requiresAuth: false
    }
},
{
    path:'/request',
    component: Request,
    meta: {
        requiresAuth: false
    }
},
{
    path:'/congregation',
    component: Congregation,
    meta: {
        requiresAuth: true
    }
},
{
    path:'/territory',
    component: Territoryies,
    meta: {
        requiresAuth: true
    }
},
{
    path:'/territory/:id',
    component: Territory,
        meta: {
        requiresAuth: true
    },
    props: true
},
{
    path:'/print',
    component: Print,
        meta: {
        requiresAuth: true
    }
},
{
    path: '/:pathMatch(.*)*',
    component: NotFound
}
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

const getCurrentUser = () => {
    return new Promise((resolve, reject) => {
        const removeListener = onAuthStateChanged(
            getAuth(),
            (user) => {
                removeListener();
                resolve(user)
            },
            reject
        )
    })
}

router.beforeEach(async (to, from, next) => {
    // Check if the route requires authentication
    if (to.matched.some(record => record.meta.requiresAuth)) {
        try {
            const user = await getCurrentUser();
            
            if (user) {

                const result = await axios.get("/api/user", {
                    headers: {
                        Authorization: `Bearer ${$cookies.get(
                            "firebaseToken"
                        )}`,
                    },
                }); 

                if (!result.data.congregation_id) {

                    return next('/request');
                }
                else {
                    return next();
                }
            }

            return next('/sign-in');
        } catch (error) {
            // Handle errors, such as network issues
            console.error("Error during authentication check:", error);
            // Redirect to '/sign-in' or an error page
            return next('/sign-in');
        }
    } else {
        // Proceed to the requested route if no authentication is required
        return next();
    }
});

export default router;

File Structure*

├───app
│   ├───Console
│   ├───Exceptions
│   ├───Http
│   │   ├───Controllers
│   │   └───Middleware
│   ├───Models
│   └───Providers
├───bootstrap
│   └───cache
├───config
├───database
│   ├───factories
│   ├───migrations
│   └───seeders
├───functions
│   
├───node_modules
│   
├───public
│   ├───assets
│   └───build
│       └───assets
├───resources
│   ├───css
│   ├───js
│   │   ├───components
│   │   ├───pages
│   │   ├───popups
│   │   ├───router
│   │   └───storage
│   └───views
├───routes
├───storage
│   ├───app
│   │   └───public
│   ├───framework
│   └───logs
├───tests
│   ├───Feature
│   └───Unit
└───vendor