Stencil | React: When using addOutputTarget an error is being thrown
PatrickInFrontEnd opened this issue · 4 comments
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
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
Ok, did some digging around and the problem originated from this function:
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 :(
Still appreciate for some kind of workaround - I'll try your approach, waiting for the fix then ;)
Seems like a problem with the gitignore library. I'll remove that (wasn't the first time)