Error on remix 1.7.0

[fernandoabolafio]

Upon installing remix 1.7.0 I started having this issue with remix-typedjson:

Error: You must render this element in a remix route element
[dev:*server]     at invariant (/Users/.../app/node_modules/@remix-run/react/dist/invariant.js:15:11)
[dev:*server]     at useRemixRouteContext (/Users/.../app/node_modules/@remix-run/react/dist/components.js:179:3)
[dev:*server]     at useLoaderData (/Users/.../app/node_modules/@remix-run/react/dist/components.js:964:10)
[dev:*server]     at useTypedLoaderData (/Users/.../app/node_modules/remix-typedjson/dist/remix.js:20:44)
[dev:*server]     at App (/Users/.../app/src/app/root.tsx:58:29)
[dev:*server]     at renderWithHooks (/Users/.../app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5662:16)
[dev:*server]     at renderIndeterminateComponent (/Users/.../app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5735:15)
[dev:*server]     at renderElement (/Users/.../app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
[dev:*server]     at renderNodeDestructiveImpl (/Users/.../app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
[dev:*server]     at renderNodeDestructive (/Users/.../app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)

[kiliman]

Thanks. I'll test it on Remix 1.7.

[kiliman]

Hmm... I just tried it and it's working fine for me. Do you have a repo I can look at?

 "dependencies": {
    "@remix-run/node": "^1.7.0",
    "@remix-run/react": "^1.7.0",
    "@remix-run/serve": "^1.7.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "remix-typedjson": "^0.1.2"
  },

import { type LoaderArgs } from "@remix-run/node";
import { typedjson, useTypedLoaderData } from "remix-typedjson";

export const loader = async ({ request }: LoaderArgs) => {
  return typedjson({
    message: "Hello World!",
    date: new Date(),
  });
};

export default function Index() {
  const { message, date } = useTypedLoaderData<typeof loader>();

  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>Welcome to Remix</h1>
      <p>{message}</p>
      <p>{date.toISOString()}</p>
    </div>
  );
}

[fernandoabolafio]

You're right. It works just fine. The problem I had was because I needed to run gen-remix again in my repo.

Thanks for your answer.

[kiliman]

Ah, so you're using gen-remix. Cool. How do you like it? I like that I can import everything from a single file, plus allow overrides for things like json and useLoaderData.

[kiliman]

If you add rmx gen-remix to postinstall in package.json, you won't have to worry about doing it after upgrades.

[fernandoabolafio]

Hey!

Thanks for the tip with adding it to the postinstall! gen-remix works great for us. Our main use case is to proxy the of import useLoaderData from typedjson. But having everything imported from a single file is super helpful too.

The issue we had, turns out, was because of remix 1.7.0. I had a false-positive that it was lacking the gen-remix. But it simply happens when we upgrade to the latest remix version with the error I sent before. I've seen similar issues in the Remix repo pointing that multiple react versions could be the culprit. I'm hopping it will be fixed in the next version.