遵循Remix官方快速入门示例构建失败，寻求解决办法

问题描述 #

严格遵循Remix官方快速入门的极简步骤操作，执行npx remix build时出现依赖解析错误。操作流程如下：

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
# 粘贴官方示例代码到app/root.jsx
vim app/root.jsx
npx remix build

使用的app/root.jsx代码：

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>
  );
}

构建时的错误信息：

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.

解决步骤 #

错误源于Yarn的Plug'n'Play（PnP）机制干扰了npm的依赖解析，按以下步骤修复：

• 清理Yarn残留文件
  删除项目目录及上级目录中的.pnp.cjs、.pnp.loader.mjs和yarn.lock文件，切断Yarn对当前项目的控制。

• 初始化npm项目
  官方快速入门步骤未创建package.json，手动补充：

  npm init -y
  

• 重新安装依赖
  先删除现有node_modules，再重新安装所有依赖：

  rm -rf node_modules
  npm i @remix-run/node @remix-run/react @remix-run/serve isbot react react-dom
  npm i -D @remix-run/dev
  

• 重新执行构建

  npx remix build
  

替代方案 #

直接使用Remix官方脚手架初始化项目，避免手动操作的疏漏：

npx create-remix@latest my-remix-app

内容的提问来源于stack exchange，提问作者Test