7.0.0 No longer supports empty root route

[anton-ecom]

Using router for modals, where baseUrl template stays outside the x-route:

// Edit modal
<template hidden x-route="/edit/:id"  x-handler="getItem" >
    <div>
            <?=$this->load('offers/edit')?>
        </div>	
</template>

// always loads, infinite scroll
<div x-data="items()">
      <?=$this->load('offers/items')?>
</div>

Checked versions. It works in 6.0.0, but it doesn't in >7.0.0. The problem is in infinite scroll - if I use x-route='/', base route reloads on navigate() and I'm losing the current progress. Can't change the logic, too many apps providing this UX.

[rehhouari]

Hey, I don't quite get what you mean by "empty root route" I can't figure out what's wrong from the sample code. Could you elaborate more please?

[streiten]

Not 💯 if it is the same issue, but:

Loading/Adding Pinecone without defining a route e.g
Alpine.$router.add('/', {templates: ''}); or in template x-route="/".
causes

ReferenceError: Path: / was not found [router.esm.js:1:5870]

Having a global bundle providing Alpine and plugins on a CMS site.
Only certain pages have an Alpine App with routing. Others error then, because no routes defined.
Debateable if the Router should be loaded at all on pages where not needed of course.
Anyhow, should the router not initialze cleanly even without any routes defined?

[rehhouari]

Not 💯 if it is the same issue, but:

Loading/Adding Pinecone without defining a route e.g Alpine.$router.add('/', {templates: ''}); or in template x-route="/". causes

ReferenceError: Path: / was not found [router.esm.js:1:5870]

Having a global bundle providing Alpine and plugins on a CMS site. Only certain pages have an Alpine App with routing. Others error then, because no routes defined. Debateable if the Router should be loaded at all on pages where not needed of course. Anyhow, should the router not initialze cleanly even without any routes defined?

Thanks for the clarification! and sorry for the late reply. That ReferenceError is from the default handler for the notfound route:

const notfound = createRoute('notfound', {
  handlers: [
  	(ctx) => console.error(new ReferenceError(ROUTE_NOT_FOUND(ctx.path))),
  ],
  name: 'notfound',
})

As you can see it is only a console error. this is made so there is a "placeholder" route to fallback to when none are defined.

I do not think however this is what the original poster's issue is however.