Nx: React: Unknown option: '--publishable'

[zachnewburgh]

Prerequisites

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed
• [x] I'm reporting the issue to the correct repository (not related to Angular, AngularCLI or any dependency)

Expected Behavior

When --publishable is appended to the React library-generation schematic, a publishable React library should be created.

Current Behavior

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. ng g @nrwl/react:lib some-library-name --publishable

Context

Please provide any relevant information about your setup:

• @nrwl/nx 8.1.2
• @nrwl/react 8.1.2
• @nrwl/web 8.1.2
• @nrwl/cypress 8.1.2

[FrozenPandaz]

We don't have a build defined for non-Angular libraries yet but would definitely like to have one in the future. Are there tools that will compile to es5, es2015, and umd? ng-packagr is probably overkill. @jaysoo will have a better idea here.

[zachnewburgh]

@FrozenPandaz Thanks for the reply. Glad to hear that this is of interest to add in the future.

Regarding tools, rollup is among those used. If it's helpful, here's a tutorial on its use.

In the meantime, is it possible to provide build instructions to a React lib, so that I can configure the packaging? (I imagine using architect.builders is probably the best way, but how can I point it to a set of instructions that I write?)

[FrozenPandaz]

Yeah, I imagine tsc + rollup would do the job.

Sure, you can use @nrwl/workspace:run-commands to execute a shell script.

[zachnewburgh]

@FrozenPandaz Thanks for getting back to me; I really appreciate the responses. I had some trouble getting @nrwl/workspace:run-commands to work, but it turned out that ng-packagr could handle React packaging with minor configuration.

For those who come across this issue before the --publishable flag can be used with @nrwl/react:lib, here's the config that allowed me to use ng-packagr in the meantime.

Install the necessary dependencies:

yarn add tslib
yarn add -D @angular-devkit/build-ng-packagr ng-packagr tsickle

The angular.json needs to be modified as follows:

# angular.json

    "LIB-NAME-HERE": {
      "root": "libs/LIB-NAME-HERE",
      "sourceRoot": "libs/LIB-NAME-HERE/src",
      "projectType": "library",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "libs/LIB-NAME-HERE/tsconfig.lib.json",
            "project": "libs/LIB-NAME-HERE/ng-package.json"
          }
        },
...

And, the following files needed to be added to the library:

# package.json

{
  "name": "@SCOPE-NAME-HERE/LIB-NAME-HERE",
  "version": "VERSION.NUM.HERE"
}

# ng-package.json

{
  "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/libs/LIB-NAME-HERE",
  "lib": {
    "entryFile": "src/index.ts",
    "umdModuleIds": {
      "react": "React",
      "react-dom": "ReactDOM"
    },
    "jsx": "react"
  }
}

# tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "jsx": "react",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "types": ["node", "jest"]
  },
  "include": ["**/*.ts", "**/*.tsx"]
}

# tsconfig.lib.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "target": "es2015",
    "jsx": "react",
    "declaration": true,
    "inlineSources": true,
    "types": [],
    "lib": ["dom", "es2018"],
  },
  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
}

[jaysoo]

@zachnewburgh @FrozenPandaz I think rollup makes the most sense to use for libs. We can work something in for a future release. I've queue this up to be worked on before the end of this month (July 2019).

[johannesschobel]

please note that the --publishable option does not work for ng g @nrwl/workspace:lib <NAME> either...

[Hotell]

@zachnewburgh @FrozenPandaz I think rollup makes the most sense to use for libs. We can work something in for a future release. I've queue this up to be worked on before the end of this month (July 2019).

any update on this @jaysoo ? thx!

[jaysoo]

@Hotell Hey, no updates yet but soon. I've been doing other enhancements for React, and this is on my list for August (this month). So stay tuned!

[Wizyma]

Hello !
First of all, this is an awsome project so GG !
And i would like to know if there is still work going on on this issue ?
I was thinking maybe digging into it... !
I work a lot with monorepo and rollup / webpack, it is worth a try :)

[vsavkin]

This has been fixed by https://github.com/nrwl/nx/pull/1907.

So I'm going to close this issue.