json is not defined Error in Remix Loader Function #9494

abdes-zakari · 2024-05-26T19:47:54Z

abdes-zakari
May 26, 2024

Description:
I followed this tutorial from Remix DOC but I am encountering an issue with the json utility in Remix. When using the json function in a loader, I receive an error stating json is not defined despite importing it from @remix-run/node.

Environment:

Operating System: Windows
Node.js Version: 18
Remix Version: 2.9.2

Code:

import type { LinksFunction, json  } from "@remix-run/node";
import {
  Form,
  Link,
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData
} from "@remix-run/react";


import appStylesHref from "./app.css?url";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: appStylesHref },
];

import { getContacts } from "./data";

export const loader = async () => {
  const contacts = await getContacts();
  return json({ contacts });
};

export default function App() {

  const { contacts } = useLoaderData<typeof loader>();

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <div id="sidebar">

          <h1>Remix Contacts</h1>
          <div>
            <Form id="search-form" role="search">
              <input
                id="q"
                aria-label="Search contacts"
                placeholder="Search"
                type="search"
                name="q"
              />
              <div id="search-spinner" aria-hidden hidden={true} />
            </Form>
            <Form method="post">
              <button type="submit">New</button>
            </Form>
          </div>
          <nav>
            {contacts.length ? (
              <ul>
                {contacts.map((contact) => (
                  <li key={contact.id}>
                    <Link to={`contacts/${contact.id}`}>
                      {contact.first || contact.last ? (
                        <>
                          {contact.first} {contact.last}
                        </>
                      ) : (
                        <i>No Name</i>
                      )}{" "}
                      {contact.favorite ? (
                        <span>★</span>
                      ) : null}
                    </Link>
                  </li>
                ))}
              </ul>
            ) : (
              <p>
                <i>No contacts</i>
              </p>
            )}
          </nav>
        </div>

        <ScrollRestoration />
        <Scripts />

        <div id="detail">
          <Outlet />
        </div>

      </body>
    </html>
  );
}

Error Message

Additional Information:

I have verified that @remix-run/node is correctly installed.
I have tried cleaning my node_modules and reinstalling dependencies.
The issue persists despite following the Remix documentation and tutorials.

I would appreciate any guidance on resolving this issue or insights into what might be causing the json is not defined error.

Thank you!

Answered by kiliman

May 26, 2024

You are using import type.

Should be

import { type LinksFunction, json } from '@remix-run/node'

View full answer

kiliman · 2024-05-26T23:31:34Z

kiliman
May 26, 2024
Maintainer

You are using import type.

Should be

import { type LinksFunction, json } from '@remix-run/node'

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

json is not defined Error in Remix Loader Function #9494

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

json is not defined Error in Remix Loader Function #9494

Uh oh!

abdes-zakari May 26, 2024

Replies: 1 comment

Uh oh!

Uh oh!

kiliman May 26, 2024 Maintainer

abdes-zakari
May 26, 2024

kiliman
May 26, 2024
Maintainer