Turborepo内のRemixアプリから、内部パッケージをインポートするときに発生するエラーを解決する

はじめに

Turborepoのappsディレクトリに、Remixプロジェクトを作成した際にエラーが発生しました。

実行できないエラーが発生

Remixのpackage.jsonに、packages/uiワークスペースの依存関係として追加しました。

package.json

{
  "dependencies": {
    "ui": "*"
  }
}

この状態でもビルドは通りました。
しかし、実行した時にエラーが発生しました。

npx turbo build
cd apps/my-remix-app
npm run start

> start
> remix-serve build

/Users/takagimeow/**/my-turborepo/packages/ui/index.tsx:1
import * as React from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module

serverDependenciesToBundleを設定してエラーを解決

このエラーを解決するには、remix.config.jsのserverDependenciesToBundleフィールドを使います。
このフィールドに、["ui"]を設定します。

remix.config.js

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ["**/.*"],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: "build/index.js",
  // publicPath: "/build/",
  future: {
    v2_errorBoundary: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
  },
  serverDependenciesToBundle: ["ui"],
};

もう一度ビルドと実行を行った結果、エラーは解決しました。

npx turbo build
cd apps/my-remix-app
npm run start

参考にした記事