Laravel Spark Billing page error in Jetstream with Inertia

Question

I have installed Laravel 8 with Jetstream based on Inertia Js.

Later I installed Laravel Spark (New Spark) and it created a new route: "billing". When I access this route directly in browser it works.

But when I added the route in menu and I click the menu link I receive the following error:

Uncaught (in promise) Error: Cannot find module './BillingPortal'

The code used:

<jet-dropdown-link href="/billing">
    Billing
</jet-dropdown-link>

I also tried:

<jet-dropdown-link :href="route('spark.portal')">
    Billing
</jet-dropdown-link>

If for example I use:

<a href="/billing">
    Billing
</a>

The design is bad, but the billing page works well.

I tried to clear the routes, the config, I ran the command: npm run dev

Any advice regarding what I am doing wrong and how can I fix it? Thank you.

Answer 1

I found a combined answer.

I used the a href, but with the inertia classes:

<a href="/billing" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">
    Billing
</a>

It seems that Inertia was looking for a custom module and using a href allow us to skip adding this functionality.

Answer 2

Also adding onto @Pascut's answer make sure you add the option to the responsive navigation menu for smaller screens. Instead of creating a new jet-responsive-nav-link element use the code below instead

 <div> <a href="/billing" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out"> Billing </a> </div>