SolidJS•3d ago

I have integrated @solid/meta in my solid-start project but I keep getting an error.

I have integrated @solid/meta in my solid-start project but I keep getting an error saying <MetaProvider /> should be in the tree. I don't know how to resolve this error even though I configured the MetaProvider at the root level and this is happening in different routes

8 Replies

Madaxen86•3d ago

Your app.tsx should be like this:

port default function App() {
  return (
    <Router
      root={props => (
        <MetaProvider>          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

port default function App() {
  return (
    <Router
      root={props => (
        <MetaProvider>          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

Ashraf COP•3d ago

I created an external RootLayout file where I defined this and passed it as a prop. However the error is coming when I refresh a page

Ashraf COP•3d ago

Here is the code

Madaxen86•3d ago

Put the MetaProvider in your app.tsx?

Ashraf COP•3d ago

still the same issue. It only happens when the page has been loaded

Madaxen86•3d ago

Can you share the repo or create a reproduction on stackblitz? https://start.solid.new/

StackBlitz

Solid-start With Tailwindcss Example - StackBlitz

Run official live example code for Solid-start With Tailwindcss, created by Solidjs on StackBlitz

Ashraf COP•10h ago

It will be hard since it's a large project and for a client. I don't know what other options are available.

Madaxen86•10h ago

Probably there is a Meta or Title tag in the server-entry.tsx or somewhere outside the MetaProvider. That’s why the error only occurs on initial page load

Gaming

Programming

I have integrated @solid/meta in my solid-start project but I keep getting an error.

Did you find this page helpful?