Nxで管理しているnpmモジュールの依存パッケージがインストールされない問題に対応する

Nxで作ったライブラリをnpmやGitHub Package Registryに公開した場合、「依存パッケージが見つからない」というエラーに遭遇することがあります。

ERROR #98124  WEBPACK
 Generating development JavaScript bundle failed
 Can't resolve 'react-tabs' in
 '/Users/sandbox/react/gatsby-starter-blog/node_modules/@hideokamoto/example'
 If you're trying to use a package make sure that 'react-tabs' is installed. If you're trying to use a local file make
  sure that the path is correct.

これはNxでビルドしたライブラリで使用しているモジュールがpeerDependenciesに登録されるという仕様からきています。

{
  "name": "@hideokamoto/example",
  "version": "0.0.10",
  "repository": {
    "type": "git",
    "url": "https://github.com/hideokamoto/example"
  },
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/@hideokamoto"
  },
  "main": "./shifter.umd.js",
  "module": "./shifter.esm.js",
  "typings": "./index.d.ts",
  "peerDependencies": {
    "react-table": "^7.5.1"
    "react-tabs": "^3.1.1"
  }
}

NxのビルドオプションbuildableProjectDepsInPackageJsonTypeを使う

ビルド時にそのライブラリで使用しているモジュールだけpackage.jsonに追加する処理がNxで実行されます。

その処理のオプションでbuildableProjectDepsInPackageJsonTypeを利用すると、peerDependenciesではなくdependenciesに登録させることができます。

$ npm run nx example:build  -- --with-deps --buildableProjectDepsInPackageJsonType=dependencies

これでdependencies側に登録されました。

{
  "name": "@hideokamoto/example",
  "version": "0.0.10",
  "repository": {
    "type": "git",
    "url": "https://github.com/hideokamoto/example"
  },
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/@hideokamoto"
  },
  "main": "./shifter.umd.js",
  "module": "./shifter.esm.js",
  "typings": "./index.d.ts",
  "dependencies": {
    "react-table": "^7.5.1"
    "react-tabs": "^3.1.1"
  },
  "peerDependencies": {}
}