SolidJS•10mo ago

useNavigate - navigate(path) throws "computations created outside a `createRoot`" and error

Sometimes (not 100% of the time) when a user selects a new category in the UI, the following code sends

computations created outside a createRoot or render will never be disposed

and then

Uncaught (in promise) TypeError: Cannot read properties of null (reading '2')

const Home: Component = () => {
  const navigate = useNavigate()

  const setSelectedCategoryId = (id: string | undefined) => {
    const path = id || '/'
    navigate(path, { resolve: false })
  }

const Home: Component = () => {
  const navigate = useNavigate()

  const setSelectedCategoryId = (id: string | undefined) => {
    const path = id || '/'
    navigate(path, { resolve: false })
  }

I have check thoroughly, all the createMemo and creatEffect are properly in Components and not in any async handlers or the like. If I replace the navigate with window.location.replace everything works fine, but of course, then my site reloads fresh every time too:

  const setSelectedCategoryId = (id: string | undefined) => {
    const path = id || '/'
    window.location.replace(path)
    // navigate(path, { resolve: true })
  }

  const setSelectedCategoryId = (id: string | undefined) => {
    const path = id || '/'
    window.location.replace(path)
    // navigate(path, { resolve: true })
  }

3 Replies

BersaelorOP•10mo ago

the weird thing is, sometimes it all works as expected , or only the warning is thrown. Then later the error occurs 100% of the time

BersaelorOP•10mo ago

the warning is also not very helpful as I'm not doing any createMemo in Home.tsx rather, the createMemo seems to happen inside <MetaProvider> which is the component at the root of Home.tsx. import { MetaProvider, Title } from '@solidjs/meta'; Possibly a bug in solidjs/meta when used with useNavigate ?

BersaelorOP•10mo ago

it's definitely caused by the MetaProvider , if I remove it from the Home the error goes away

"@solidjs/meta@^0.29.3":
  version "0.29.3"

"@solidjs/meta@^0.29.3":
  version "0.29.3"

diving further down, the problem in the <MetaProvider> seems to be due to

  const selectedCategoryName = () => selectedCategory()?.name;

 return (
    <MetaProvider>
      <Title>URHere {selectedCategoryName() || ''}</Title>

  const selectedCategoryName = () => selectedCategory()?.name;

 return (
    <MetaProvider>
      <Title>URHere {selectedCategoryName() || ''}</Title>

PS; the selectedCategory is

  const params = useParams()
  const selectedCategory = createMemo(() => params.category)

  const params = useParams()
  const selectedCategory = createMemo(() => params.category)

so It looks like I cannot use any reactive variables in <Title> </Title> similar issues seem to happen when I do

      <Meta name="og:image" content={titleImage()} /> */}

      <Meta name="og:image" content={titleImage()} /> */}

Gaming

Programming

useNavigate - navigate(path) throws "computations created outside a `createRoot`" and error