Stencil | React: When using addOutputTarget an error is being thrown

PatrickInFrontEnd commented 3 weeks ago

Describe the bug When using command nx g @nxext/stencil:add-outputtarget my-lib there is an error being shown and so the output target is not being created - without the possibility to work with stencil components.

RangeError: path should be a `path.relative()`d string, but got "./web-components-react/**/generated"
    at throwError (/Users/[path]/Documents/my-applications/training/ember-stencil-training/node_modules/ignore/index.js:387:9)
    at checkPath (/Users/[path]/Documents/my-applications/training/ember-stencil-training/node_modules/ignore/index.js:406:12)
    at Ignore._test (/Users/[path]/Documents/my-applications/training/ember-stencil-training/node_modules/ignore/index.js:527:5)
    at Ignore.ignores (/Users/[path]/Documents/my-applications/training/ember-stencil-training/node_modules/ignore/index.js:572:17)
    at addToGitignore (/Users/[path]/Documents/my-applications/training/ember-stencil-training/node_modules/@nxext/stencil/src/utils/utillities.js:21:13)
    at /Users/[path]/Documents/my-applications/training/ember-stencil-training/node_modules/@nxext/stencil/src/generators/add-outputtarget/add-react/generator.js:37:41
    at Generator.next (<anonymous>)
    at fulfilled (/Users/[path]/Documents/my-applications/training/ember-stencil-training/node_modules/tslib/tslib.js:166:62)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

To Reproduce Steps to reproduce the behavior:

Create stencil library using CLI along with NX monorepo
use command nx g @nxext/stencil:add-outputtarget [lib_name] --outputType='react'

Expected behavior A config has been properly created with an output target for react-library, so that NX knows how to exactly run the library and convert Stencil web-components into wrappers for react library.

Additional context package.json file:

{
  "name": "ember-stencil-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "new:lib:react": "nx g @nx/react:lib",
    "new:app": "nx g @nx/react:app"
  },
  "private": true,
  "dependencies": {
    "jest-cli": "^29.7.0",
    "puppeteer": "^22.11.0",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-router-dom": "6.11.2"
  },
  "devDependencies": {
    "@nx/storybook": "^19.3.0",
    "@nxext/stencil": "^19.0.0",
    "@stencil/core": "^4.18.3",
    "@stencil/sass": "^3.0.12",
    "@babel/core": "^7.14.5",
    "@babel/preset-react": "^7.14.5",
    "@nx/cypress": "19.3.0",
    "@nx/eslint": "19.3.0",
    "@nx/eslint-plugin": "19.3.0",
    "@nx/jest": "19.3.0",
    "@nx/js": "19.3.0",
    "@nx/react": "19.3.0",
    "@nx/rollup": "19.3.0",
    "@nx/web": "19.3.0",
    "@nx/webpack": "19.3.0",
    "@nx/workspace": "19.3.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
    "@rollup/plugin-url": "^8.0.2",
    "@svgr/rollup": "^8.1.0",
    "@svgr/webpack": "^8.0.1",
    "@swc-node/register": "~1.9.1",
    "@swc/cli": "~0.3.12",
    "@swc/core": "~1.5.7",
    "@swc/helpers": "~0.5.11",
    "@testing-library/react": "15.0.6",
    "@types/jest": "^29.5.12",
    "@types/node": "^20.14.2",
    "@types/react": "18.3.1",
    "@types/react-dom": "18.3.0",
    "@typescript-eslint/eslint-plugin": "^7.3.0",
    "@typescript-eslint/parser": "^7.3.0",
    "babel-jest": "^29.4.1",
    "core-js": "^3.36.1",
    "cypress": "^13.8.0",
    "eslint": "~8.57.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-cypress": "^2.13.4",
    "eslint-plugin-import": "2.27.5",
    "eslint-plugin-jsx-a11y": "6.7.1",
    "eslint-plugin-react": "7.32.2",
    "eslint-plugin-react-hooks": "4.6.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.4.1",
    "nx": "19.3.0",
    "prettier": "^2.6.2",
    "react-refresh": "^0.10.0",
    "rollup": "^4.14.0",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "tslib": "^2.3.0",
    "typescript": "~5.4.2",
    "webpack-cli": "^5.1.4"
  }
}

node version: 20.14.0 npm version: 10.7.0 OS - Macbook Pro 2019 - Sonoma 14.5 Processor: 2,6 GHz 6-Core Intel Core i7

ADDITIONAL INFO: do not mind the name of ember - it is a react application being set up

JaapBarnhoorn commented 2 weeks ago

I have the same issue with every outputType (angular, react, svelte) I tried a minimal repro by creating a new Stencil "my-lib" project and then did: nx g @nxext/stencil:add-outputtarget my-lib --outputType='angular'

Node   : 22.0.0
OS     : linux-x64
pnpm   : 9.1.4

nx                 : 18.2.1
@nx/js             : 18.2.1
@nx/jest           : 18.2.1
@nx/linter         : 18.2.1
@nx/eslint         : 18.2.1
@nx/workspace      : 18.2.1
@nx/angular        : 18.2.1
@nx/cypress        : 18.2.1
@nx/devkit         : 18.2.1
@nx/eslint-plugin  : 18.2.1
@nx/storybook      : 18.2.1
@nrwl/tao          : 18.2.1
@nx/web            : 18.2.1
@nx/webpack        : 18.2.1
typescript         : 5.4.5
---------------------------------------
Community plugins:
@nxext/stencil : 19.0.0

I also tried downgrading to @nxext/stencil 18.0.0 but had the same error with that

JaapBarnhoorn commented 2 weeks ago

Ok, did some digging around and the problem originated from this function: https://github.com/nxext/nx-extensions/blob/d3111c75924fa9f424e655000a52468795e3b0ee/packages/stencil/src/utils/utillities.ts#L18

I've temporarily hidden my .gitignore file (mv .gitignore ..gitignore) and then the command does execute.

After this you have to add your ./web-components-react/**/generated path manually to the .gitignore file.

I'm sorry that I don't have time to find out what the exact cause of the problem is and to suggest a fix :(

PatrickInFrontEnd commented 2 weeks ago

Still appreciate for some kind of workaround - I'll try your approach, waiting for the fix then ;)

DominikPieper commented 2 weeks ago

Seems like a problem with the gitignore library. I'll remove that (wasn't the first time)

nxext / nx-extensions

Stencil | React: When using addOutputTarget an error is being thrown #1092