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

Nxで作ったライブラリをnpmやGitHub Package Registryに公開した場合、「依存パッケージが見つからない」というエラーに遭遇することがあります。 これはNxでビルドしたライブラリで使用しているモジュー […]

広告ここから
広告ここまで

目次

    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": {}
    }
    
    

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark