React Remix startup example failure?

374 views Asked by At

I ran the dead-simple remix example from the documentation and got an error. How can this be wrong?

mkdir my-remix-app
cd my-remix-app
npm i @remix-run/node @remix-run/react @remix-run/serve isbot react react-dom
npm i -D @remix-run/dev
mkdir app
# paste example from docs
vim app/root.jsx
npx remix build

example from docs:

import {
  Links,
  Meta,
  Outlet,
  Scripts,
} from "@remix-run/react";

export default function App() {
  return (
    <html>
      <head>
        <link
          rel="icon"
          href="data:image/x-icon;base64,AA"
        />
        <Meta />
        <Links />
      </head>
      <body>
        <h1>Hello world!</h1>
        <Outlet />

        <Scripts />
      </body>
    </html>
  );
}

I got both of these examples from https://remix.run/docs/en/main/start/quickstart. I checked the details several times to make sure I copied everything exactly as it said to in the docs. I verified that I didn't get anything wrong with special characters or unicode characters that look like normal characters.


 info  building... (NODE_ENV=production)
✘ [ERROR] Could not resolve "@remix-run/react"

    app/root.jsx:6:9:
      6 │   } from "@remix-run/react";
        ╵          ~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@remix-run/react" here because it's not listed as a dependency of this package:

    ../../../.pnp.cjs:111:33:
      111 │           "packageDependencies": [\
          ╵                                  ~~

  You can mark the path "@remix-run/react" as external to exclude it from the bundle, which will remove this error.


✘ [ERROR] Could not resolve "react/jsx-runtime"

    app/root.jsx:11:8:
      11 │         <head>
         ╵         ^

  The Yarn Plug'n'Play manifest forbids importing "react" here because it's not listed as a dependency of this package:

    ../../../.pnp.cjs:111:33:
      111 │           "packageDependencies": [\
          ╵                                  ~~

  You can mark the path "react/jsx-runtime" as external to exclude it from the bundle, which will remove this error.


✘ [ERROR] Could not resolve "@remix-run/react"

    node_modules/@remix-run/dev/dist/config/defaults/entry.client.tsx:1:29:
      1 │ import { RemixBrowser } from "@remix-run/react";
        ╵                              ~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@remix-run/react" here because it's not listed as a dependency of this package:

    ../../../.pnp.cjs:111:33:
      111 │           "packageDependencies": [\
          ╵                                  ~~

  You can mark the path "@remix-run/react" as external to exclude it from the bundle, which will remove this error.


✘ [ERROR] Could not resolve "react"

    node_modules/@remix-run/dev/dist/config/defaults/entry.client.tsx:2:44:
      2 │ import { startTransition, StrictMode } from "react";
        ╵                                             ~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "react" here because it's not listed as a dependency of this package:

    ../../../.pnp.cjs:111:33:
      111 │           "packageDependencies": [\
          ╵                                  ~~

  You can mark the path "react" as external to exclude it from the bundle, which will remove this error.


✘ [ERROR] Could not resolve "react-dom/client"

    node_modules/@remix-run/dev/dist/config/defaults/entry.client.tsx:3:28:
      3 │ import { hydrateRoot } from "react-dom/client";
        ╵                             ~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "react-dom" here because it's not listed as a dependency of this package:

    ../../../.pnp.cjs:111:33:
      111 │           "packageDependencies": [\
          ╵                                  ~~

  You can mark the path "react-dom/client" as external to exclude it from the bundle, which will remove this error.


✘ [ERROR] Could not resolve "react/jsx-runtime"

    node_modules/@remix-run/dev/dist/config/defaults/entry.client.tsx:9:6:
      9 │       <RemixBrowser />
        ╵       ^

  The Yarn Plug'n'Play manifest forbids importing "react" here because it's not listed as a dependency of this package:

    ../../../.pnp.cjs:111:33:
      111 │           "packageDependencies": [\
          ╵                                  ~~

  You can mark the path "react/jsx-runtime" as external to exclude it from the bundle, which will remove this error.
0

There are 0 answers