Zenn
🥺

Remixを試そうとしたらbuildが失敗する

2024/03/04に公開
Node.js
yarn
Remix
Bun
tech

状況

  • bunx create-remix@latest でプロジェクトを作成した
  • bun run build を実行したところ、ビルドが失敗した
bun run build の実行結果
$ remix build
 info  building... (NODE_ENV=production)
✘ [ERROR] Could not resolve "@remix-run/react"

    app/entry.client.tsx:7:29:
      7 │ 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:36:31:
      36 │         "packageDependencies": [\
         ╵                                ~~

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


✘ [ERROR] Could not resolve "react"

    app/entry.client.tsx:8:44:
      8 │ 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:36:31:
      36 │         "packageDependencies": [\
         ╵                                ~~

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


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

    app/entry.client.tsx:9:28:
      9 │ 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:36:31:
      36 │         "packageDependencies": [\
         ╵                                ~~

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


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

    app/entry.client.tsx:15:6:
      15 │       <RemixBrowser />
         ╵       ^

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

    ../../.pnp.cjs:36:31:
      36 │         "packageDependencies": [\
         ╵                                ~~

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


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

    app/root.tsx:10:7:
      10 │ } 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:36:31:
      36 │         "packageDependencies": [\
         ╵                                ~~

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


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

    app/root.tsx:19:6:
      19 │       <head>
         ╵       ^

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

    ../../.pnp.cjs:36:31:
      36 │         "packageDependencies": [\
         ╵                                ~~

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


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

    app/routes/_index.tsx:13:6:
      13 │       <h1>Welcome to Remix</h1>
         ╵       ^

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

    ../../.pnp.cjs:36:31:
      36 │         "packageDependencies": [\
         ╵                                ~~

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

https://remix.run/docs/en/main/start/quickstart

環境

Windows 11上のUbuntu環境（WSL 2）です。

  • Windows 11 23H2
  • WSL 2
  • Ubuntu 22.04.4 LTS
  • Node.js 21.6.2
  • bun 1.0.29
  • Yarn 4.1.0

https://bun.sh/

確認したこと/試したこと

package.json を確認

実行結果のエラーメッセージに以下のような記述がありました。

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

そこで package.json を見てみましたが、 @remix-run/react は dependencies に含まれていました。

package.json
"dependencies": {
    "@remix-run/css-bundle": "^2.8.0",
    "@remix-run/node": "^2.8.0",
    "@remix-run/react": "^2.8.0",
    "@remix-run/serve": "^2.8.0",
    "isbot": "^4.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },

node_modules を削除して再インストール

rm -rf node_modules
bun install

これでも特に変わらず。

.pnp.cjs を削除（これで解決）

先ほどのエラーメッセージ

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

をそのまま検索してみたところ、 remix-run/remix のissueで同様のエラーが報告されており、 .pnp.cjs を削除することで解決したという報告がありました。

https://github.com/remix-run/remix/issues/5180#issuecomment-1415408167

自分の環境ではホームディレクトリに.pnp.cjs があったので、それを削除して再度 bun run build を実行したところ、無事にビルドが成功しました。

~/my-remix-app $ bun run build
$ remix build
 info  building... (NODE_ENV=production)
 info  built (153ms)

bun run dev も問題なく動作します。

~/my-remix-app $ bun run dev
$ remix dev --manual

 💿  remix dev

 info  building...
 info  built (235ms)
[remix-serve] http://localhost:3000

Discussion