cannot execute ngneat schematic nx-setup on nx workspace lib

[kingjordan]

I'm submitting a...

[ X] Bug report  

Current behavior

Trying to execute the ngneat schematic nx-setup results in an error

When I try to run npx nx generate @ngneat/tailwind:nx-setup --darkMode=class --project=ui-core --enableJit=false i get the following error:

"Nxsetup" schema is using the keyword id which is depricated type error: cannot read property 'options' of undefined

This also occurs regardless of how i set the arguments or if I use the nx generate gui in vs code

Expected behavior

add tailwind config to nx-workspace

Minimal reproduction of the problem with instructions

create a new nx workspace: npx create-nx-workspace --preset=angular add a lib npx ng g lib ui-core

then run the above command to add tailwind to the ui-core lib

Environment

Angular version: 12.0.0 ngneat 7.0.3 nrwl/cli 12.3.4

For Tooling issues:

• Node version: 14.15.1
• Platform: windows

RELATED TO ISSUE

https://github.com/ngneat/tailwind/issues/106

[kingjordan]

UPDATE

So this issue only affects libs in an nx workspace. If I execute the following command nx generate @ngneat/tailwind:nx-setup --darkMode=class --project=default-project --enableJit=false on the default angulr project for the workspace, the schematic works.

I have narrowed down the error to the following:

"NxSetup" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID. ✅️ Added [email protected] TypeError: Cannot read property 'options' of undefined at C:\Users\jorda\source\nx\mcp\node_modules@ngneat\tailwind\src\utils\update-project-root-styles.js:18:63 at processTicksAndRejections (internal/process/task_queues.js:93:5) Cannot read property 'options' of undefined

as you can see here:

the error points to the update-project-root-styles.js file and the highlighted line below:

SO the way libs are defined as projects is different than main apps and somehow that is causing this error.

[kingjordan]

WORKAROUND:

assumes you already added ngneat/tailwind to package.json

STEP 1:

add Add [email protected] to root package.json

STEP 2:

add tailwind.config.js to root of workspace with the following content:

const { guessProductionMode } = require("@ngneat/tailwind");

module.exports = {
    prefix: '',
    purge: {
      enabled: guessProductionMode(),
      content: [
        './apps/**/*.{html,ts}',
        './libs/**/*.{html,ts}',
      ]
    },
    darkMode: 'class', // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
};

STEP 3:

add a styles.scss to the src directory of your lib with the following content:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/* You can add global styles to this file, and also import other style files */

My library can now use tailwind classes and they are picked up during nx serve.

[thebspin]

@kingjordan do you also by any chance use Storybook? I cannot get it to work in Storybook using the method :(

[CharlyRipp]

Note this is happening on vanilla Angular CLI

ng new example --routine --style scss
cd example
ng add @ngneat/tailwind

The package @ngneat/[email protected] will be installed and executed. Would you like to proceed? Yes ✔ Package successfully installed. An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID See "/private/var/folders/vx/pxbdn74s0mx_syd43ysd6qnr0000gn/T/ng-RL0qHc/angular-errors.log" for further details.

~ cat /private/var/folders/vx/pxbdn74s0mx_syd43ysd6qnr0000gn/T/ng-RL0qHc/angular-errors.log
[error] Error: NOT SUPPORTED: keyword "id", use "$id" for schema ID
    at Object.code (/Users/dev/test/example/node_modules/ajv/dist/vocabularies/core/id.js:6:15)
    at keywordCode (/Users/dev/test/example/node_modules/ajv/dist/compile/validate/index.js:454:13)
    at /Users/dev/test/example/node_modules/ajv/dist/compile/validate/index.js:222:17
    at CodeGen.code (/Users/dev/test/example/node_modules/ajv/dist/compile/codegen/index.js:439:13)
    at CodeGen.block (/Users/dev/test/example/node_modules/ajv/dist/compile/codegen/index.js:568:18)
    at iterateKeywords (/Users/dev/test/example/node_modules/ajv/dist/compile/validate/index.js:219:9)
    at groupKeywords (/Users/dev/test/example/node_modules/ajv/dist/compile/validate/index.js:208:13)
    at /Users/dev/test/example/node_modules/ajv/dist/compile/validate/index.js:192:13
    at CodeGen.code (/Users/dev/test/example/node_modules/ajv/dist/compile/codegen/index.js:439:13)
    at CodeGen.block (/Users/dev/test/example/node_modules/ajv/dist/compile/codegen/index.js:568:18)

Environment

 ~ ng version             

Angular CLI: 13.1.2
Node: 16.13.2
Package Manager: npm 8.1.2
OS: darwin x64

Angular: 13.1.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2
@angular-devkit/schematics      13.1.2
@angular/cli                    13.1.2
@schematics/angular             13.1.2
rxjs                            7.4.0
typescript                      4.5.4