False positive: `Make sure your app is wrapped in a <Router />` , @solidjs/router 0:7:0 - in npm lib

I have a npm component ( <O_Header) that assumes a router is wrapping it, ie, uses <A> tags wrapping the app in a router:
/* @refresh reload */
import { render } from 'solid-js/web';
import { Router } from '@solidjs/router';

import './index.css';
import { App } from './app';
render(
() => (
<Router>
<App />
</Router>
),
document.getElementById('root') as HTMLElement
);
/* @refresh reload */
import { render } from 'solid-js/web';
import { Router } from '@solidjs/router';

import './index.css';
import { App } from './app';
render(
() => (
<Router>
<App />
</Router>
),
document.getElementById('root') as HTMLElement
);
usage in the problem project
export const App: Component = () => {
return (
<>
<O_Header
NavItems={[
{ url: '/home', text: 'Home' },
]}>
<A href="/">Your logo here</A>
</O_Header>
<Routes>
<Route path="/" component={Home} />
<Route path="/users" component={Users} />
</Routes>
</>
);
};
export const App: Component = () => {
return (
<>
<O_Header
NavItems={[
{ url: '/home', text: 'Home' },
]}>
<A href="/">Your logo here</A>
</O_Header>
<Routes>
<Route path="/" component={Home} />
<Route path="/users" component={Users} />
</Routes>
</>
);
};
utils.js?v=84c27385:28 Uncaught Error: Make sure your app is wrapped in a <Router /> at invariant (utils.js?v=84c27385:28:15) at useRouter (routing.js?v=84c27385:9:32) at useRoute (routing.js?v=84c27385:11:75) at useResolvedPath (routing.js?v=84c27385:13:19) at A (components.jsx:80:16) at dev.js:524:12 at untrack (dev.js:427:12) at Object.fn (dev.js:520:37)
5 Replies
Braveheart
Braveheart2y ago
the npm source:
import type { Component, ParentComponent } from 'solid-js';
import { A } from '@solidjs/router';
import { A_Icon_Hero, HeroIconName } from '../../atoms';
import { For } from 'solid-js';

type NavItem = {
url: string;
text: string;
};

type props = {
NavItems: NavItem[];
};

/**
* This is a header component for projects
* @param props
* @returns
* @example
* <O_Header NavItems={[{url: '/home', text: 'Home'}, {url: '/settings', text: 'Settings'}]}>
* Your logo here
* </O_Header>
*
* //todo dark mode
*/
export const O_Header: ParentComponent<props> = (props) => {
return (
<header class="h-[88px] border-b border-neutral-300 px-12 py-6">
<nav class="flex w-full items-center justify-between">
<div>{props.children}</div>
<div class="flex gap-6 text-base font-medium">
<For each={props.NavItems}>
{(item) => (
<A href={item.url} class="hover:text-primary-500 text-neutral-900">
{item.text}
</A>
)}
</For>
</div>

</nav>
</header>
);
};
import type { Component, ParentComponent } from 'solid-js';
import { A } from '@solidjs/router';
import { A_Icon_Hero, HeroIconName } from '../../atoms';
import { For } from 'solid-js';

type NavItem = {
url: string;
text: string;
};

type props = {
NavItems: NavItem[];
};

/**
* This is a header component for projects
* @param props
* @returns
* @example
* <O_Header NavItems={[{url: '/home', text: 'Home'}, {url: '/settings', text: 'Settings'}]}>
* Your logo here
* </O_Header>
*
* //todo dark mode
*/
export const O_Header: ParentComponent<props> = (props) => {
return (
<header class="h-[88px] border-b border-neutral-300 px-12 py-6">
<nav class="flex w-full items-center justify-between">
<div>{props.children}</div>
<div class="flex gap-6 text-base font-medium">
<For each={props.NavItems}>
{(item) => (
<A href={item.url} class="hover:text-primary-500 text-neutral-900">
{item.text}
</A>
)}
</For>
</div>

</nav>
</header>
);
};
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Braveheart
Braveheart2y ago
its importing from an npm private repo ie import { O_Header } from 'web-commons'; ill see if same issue if i copy the file to the project instead yup, the error goes away
Braveheart
Braveheart2y ago
its all exported from the npm repo like
Braveheart
Braveheart15mo ago
I still get this from time to time