SolidJS•2y ago

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

BraveheartOP•2y 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•2y ago

Message Not Public

BraveheartOP•2y 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

BraveheartOP•2y ago

its all exported from the npm repo like

BraveheartOP•2y ago

I still get this from time to time

Gaming

Programming

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