[Bug?]: undefined userRouteData when using jsx instead of tsx

[xarthurx]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

1. I'm trying to learn the routeData approach of hosting data on the server.
2. I'm using jsx instead of tsx.

When using the example:

And transfer it to jsx:

import { For, createResource } from "solid-js"
import { useRouteData } from "solid-start"

export function routeData() {
  const [students] = createResource(async () => {
    const response = await fetch("https://hogwarts.deno.dev/students")
    return await response.json()
  })

  return { students }
}

export default function Page() {
  const { students } = useRouteData()

  return (
    <ul>
      <For each={students()}>{student => <li>{student.name}</li>}</For>
    </ul>
  )
}

my console always report useRouteData() is undefined.

I'm not sure if this is a bug or my misuse, but I cannot find any info on how to use it in jsx.

Expected behavior 🤔

no errors.

Steps to reproduce 🕹

Steps:

1. see above description.

Context 🔦

No response

Your environment 🌎

No response

[edivados]

Is ssr enabled? Tried the sample out and noticed that with ssr disabled https://hogwarts.deno.dev/students can't be fetched on the browser because of cors.

Otherwise can't reproduce it.

[xarthurx]

Is ssr enabled? Tried the sample out and noticed that with ssr disabled https://hogwarts.deno.dev/students can't be fetched on the browser because of cors.

Otherwise can't reproduce it.

This is actually a question I'm a bit unsure:

vite.config.js:

export default defineConfig({
  plugins: [
    unocssPlugin(),
    unocss(),
    {
      ...(
        mdx({
          jsxImportSource: "solid-js",
          jsx: true,
          providerImportSource: "solid-mdx",
          rehypePlugins: [rehypeHighlight, remarkGfm],
        })
        //
      ),
      enforce: "pre",
    },
    solid({
      adapter: (await import("solid-start-static")).default(),
      extensions: [".mdx", ".md"],
      ssr: true,
    }),
  ],

  ssr: {
    external: ["ag-grid-solid"],
  },
});

browser console:

[edivados]

Should be on. meta.env.SSR is always false or I have never seen it set to true. START_SSR is what to look for.
oh.. I tested with the bare template. 😅 If you have a repo, I can take a look at it. Makes it simpler to reproduce.

[xarthurx]

Should be on. meta.env.SSR is always false or I have never seen it set to true. START_SSR is what too look for. oh.. I tested with the bare template. 😅 If you have a repo, I can take a look at it. Makes it simpler to reproduce.

Here you go:
https://github.com/xarthurx/ddmTestRepo

In the src/schedule.jsx file, you can turn on the useRouteData() and got the undefined issue:

[edivados]

routeData should be exported by a route i.e. routes/index.jsx. You can then use useRouteData() to access the return value of the closest routeData.

[xarthurx]

routeData should be exported by a route i.e. routes/index.jsx. You can than use useRouteData() to access the return value of the closest routeData.

Sorry for my ignorance...

So I put the routeData function in routes/dataRoutes.jsx file, and the issue is still there.
(code in the above repo is updated)

Questions from my confusion of the document:

1. don't I need to import routeData?
2. by "closest, do you mean file distance, or loading sequence? How could I know if a routeData` is the closest one?

[edivados]

The route where your component is in. In your case routes/(index)/index.jsx. I think the best thing to do would be to use useRouteData in index.jsx and pass the data to the component. But calling useRouteData inside the component works just as well.

1. No, the router handles routeData, you only need to access it with useRouteData. (It either uses a context underneath or something similar. Not sure about the implementation)
2. I belive this only applies to nested routes where you could end up with two exports stacked. You always just get the routeData from the route you are in.

• Layout (export routeData)
  • Page (export routeData)
    • Component (useRouteData) : Will get routeData from Page not Layout

[xarthurx]

OK, I tried to understand the concept “route”… I thought any file inside the ‘route’ folder is a route, but it seems it is not… is it the file that renders a page a “route”? So the ‘student.tsx’ file actually renders a page? In my case, even the ‘schedule.jsx’ export html things, but since it is used in the index.jsx, the file is actually a component, and only the ‘index.jsx’ is a ‘route’? Any route file must be inside the “routes”folder, but files inside the ‘routes’ folder may not be a route (if it is not rendered as a page)?

…

On Tue, Aug 15, 2023 at 22:29, Davide ***@***.***> wrote: The route where your component is in. In your case routes/(index)/index.jsx. 1. No, the router handles routeData, you only need to access it with useRouteData. (It either uses a context underneath or something similar. Not sure about the implementation) 2. I belive this only applies to nested routes <https://start.solidjs.com/core-concepts/routing#nested-routes> where you could end up with two exports stacked. - Layout (export routeData) - Page (export routeData) - Componente (useRouteData) : Will not get the routeData from Layout — Reply to this email directly, view it on GitHub <#1004 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOVGVQRCPJDQKBM6QH56WTXVPL2ZANCNFSM6AAAAAA3Q23LBM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[edivados]

I am sorry if I caused any confusion.

OK, I tried to understand the concept “route”… I thought any file inside
the ‘route’ folder is a route, but it seems it is not… is it the file that
renders a page a “route”?

You lost me a bit here. Files placed under /src/routes are treated as routes as stated in the docs.

For files placed in the routes directory the following things will be picked up when generating the routes:

• Default export of solid component - Referred to as UI Route
• Export of a function named routeData - To manage loading data in UI Route
• Export of functions named like HTTP method (GET, POST, etc.) - Referred to as API Routes

It is possible to have a default export and export functions named like HTTP method at the same time. With the exception of default export and GET method where only one or the other is possible.

// This is returned on a POST request to this route
export function POST() {
  return new Response('API response');
}

export default function Home() {
  return <div>Page</div>
}

You can still export other stuff and import it somewhere else but it will not be used when generating the route.

---

To come back to the initial issue with routeData. Here is an example with useRouteData inside the ClientOnlySchedule component.

routes/(index)/index.jsx

// since ag-grid has no SSR feature, make it client-only
import { clientOnly } from "~/utils";

export function routeData() {
  return createRouteData(async () => {
    const response = await fetch("/schedule.json");
    return await response.json();
  });
}

const ClientOnlySchedule = clientOnly(() =>
  import("~/schedule.jsx")
);

function Home() {
...
}

src/schedule.jsx

function Schedule() {
  const scheduleData = useRouteData();
  ...
}

[xarthurx]

I am sorry if I caused any confusion.

OK, I tried to understand the concept “route”… I thought any file inside
the ‘route’ folder is a route, but it seems it is not… is it the file that
renders a page a “route”?

You lost me a bit here. Files placed under /src/routes are treated as routes as stated in the docs.

For files placed in the routes directory the following things will be picked up when generating the routes:

• Default export of solid component - Referred to as UI Route
• Export of a function named routeData - To manage loading data in UI Route
• Export of functions named like HTTP method (GET, POST, etc.) - Referred to as API Routes

It is possible to have a default export and export functions named like HTTP method at the same time. With the exception of default export and GET method where only one or the other is possible.

This is what I initially understand and I created a routes/dataRoutes.jsx file to put the routeData function
#1004 (comment)

And you pointed to me that /route/(index)/index.jsx is the correct location in: #1004 (comment)

That's where I got confused that if all files under routes folder are routes.

But anyway, I did as you suggested, put the routeData into index.jsx. The problem is not resolved...

if I do (from the doc)

  const  { scheduleData } = useRouteData();

I got

If I do (in your code)

  const   scheduleData  = useRouteData();

The return value of useRouteData() is always undefined --> I guess this means the routeData is not functioning correctly?

The test Repo is updated: https://github.com/xarthurx/ddmTestRepo

[edivados]

Opened a PR on your repo fixing something else. Should work on dev and build. Left also some comments. Simpler than pasting everything here.

I could not reproduce the error in the image. It just showed an empty table in dev and the "schedule not loaded successfully..." in build. If the PR does not work for you then there is maybe something else wrong.

This is what I initially understand and I created a routes/dataRoutes.jsx file to put the routeData function

I should have been more specific. What I meant was that the the routeData function is a feature ot the router and has to be exported from the route file that uses your component.

[xarthurx]

Opened a PR on your repo fixing something else. Should work on dev and build. Left also some comments. Simpler than pasting everything here.

I could not reproduce the error in the image. It just showed an empty table in dev and the "schedule not loaded successfully..." in build. If the PR does not work for you then there is maybe something else wrong.

Now it works!

This is what I initially understand and I created a routes/dataRoutes.jsx file to put the routeData function

I should have been more specific. What I meant was that the the routeData function is a feature ot the router and has to be exported from the route file that uses your component.

I see, now I understand totally.

Really really appreciate your help!!!