Stencil: Creating a buildable library throws an exception

[lehmamic]

Describe the bug
Cannot create a buildable and publishable stencil library.

To Reproduce

1. Create an nx workspace: npx create-nx-workspace@latest stencil-test
2. Add dependencies: npm install -D @nx/node @nx/storybook @nxext/stencil
3. Add an stencil lib: nx g @nxext/stencil:lib web-components --publishable --buildable --importPath=@my-lib/components --verbose

This will throw an exception:

TypeError: Cannot read properties of undefined (reading 'properties')
    at addCodeIntoArray (/Users/leh/Data/misc/node_modules/@nxext/stencil/src/stencil-core-utils/lib/plugins.js:11:37)
    at addToPlugins (/Users/leh/Data/misc/node_modules/@nxext/stencil/src/stencil-core-utils/lib/plugins.js:87:12)
    at addStylePlugin (/Users/leh/Data/misc/node_modules/@nxext/stencil/src/stencil-core-utils/lib/style-plugins.js:20:43)
    at addStylePluginToConfig (/Users/leh/Data/misc/node_modules/@nxext/stencil/src/stencil-core-utils/lib/style-plugins.js:45:82)
    at /Users/leh/Data/misc/node_modules/@nxext/stencil/src/generators/make-lib-buildable/make-lib-buildable.js:35:57
    at Generator.next (<anonymous>)
    at /Users/leh/Data/misc/node_modules/tslib/tslib.js:169:75
    at new Promise (<anonymous>)
    at Object.__awaiter (/Users/leh/Data/misc/node_modules/tslib/tslib.js:165:16)
    at makeLibBuildableGenerator (/Users/leh/Data/misc/node_modules/@nxext/stencil/src/generators/make-lib-buildable/make-lib-buildable.js:31:20)

Expected behavior

The stencil library will be added to the nx workspace

Additional context

Hi have following package versions in place:

{
  "name": "@stencil-test/source",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {},
  "private": true,
  "dependencies": {
    "tslib": "^2.3.0"
  },
  "devDependencies": {
    "@nx/jest": "17.2.8",
    "@nx/js": "17.2.8",
    "@nx/workspace": "17.2.8",
    "@stencil/core": "^4.11.0",
    "@stencil/sass": "3.0.8",
    "@swc-node/register": "~1.6.8",
    "@swc/core": "~1.3.106",
    "@types/jest": "^29.5.11",
    "@types/node": "20.11.6",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "nx": "17.2.8",
    "prettier": "^3.2.4",
    "puppeteer": "^21.9.0",
    "ts-jest": "^29.1.2",
    "ts-node": "10.9.2",
    "typescript": "^5.2.2"
  }
}

[jprivard]

Same here. And with Crystal Project for NX around the corner, I wonder if it'd be better to sit and wait for a v18+ release (any known plans at this subject for this extension?). Unless there is a workaround to this issue ?

[Samg983]

We're also experiencing this issue. It's not possible to make the lib buildable.

>  NX   Cannot read properties of undefined (reading 'properties')

TypeError: Cannot read properties of undefined (reading 'properties')
    at addCodeIntoArray (/../../../../../node_modules/@nxext/stencil/src/stencil-core-utils/lib/plugins.js:11:37)

[santhoshdasari786]

i am also facing same issues

>  NX   Cannot read properties of undefined (reading 'properties')

TypeError: Cannot read properties of undefined (reading 'properties')
    at addCodeIntoArray (W:\recotap\adninja-workspace\node_modules\@nxext\stencil\src\stencil-core-utils\lib\plugins.js:11:37)
    at addToPlugins (W:\recotap\adninja-workspace\node_modules\@nxext\stencil\src\stencil-core-utils\lib\plugins.js:87:12)
    at addStylePlugin (W:\recotap\adninja-workspace\node_modules\@nxext\stencil\src\stencil-core-utils\lib\style-plugins.js:20:43)
    at addStylePluginToConfig (W:\recotap\adninja-workspace\node_modules\@nxext\stencil\src\stencil-core-utils\lib\style-plugins.js:45:82)  
    at W:\recotap\adninja-workspace\node_modules\@nxext\stencil\src\generators\make-lib-buildable\make-lib-buildable.js:35:57
    at Generator.next (<anonymous>)
    at W:\recotap\adninja-workspace\node_modules\tslib\tslib.js:169:75
    at new Promise (<anonymous>)
    at Object.__awaiter (W:\recotap\adninja-workspace\node_modules\tslib\tslib.js:165:16)
    at makeLibBuildableGenerator (W:\recotap\adninja-workspace\node_modules\@nxext\stencil\src\generators\make-lib-buildable\make-lib-buildable.js:31:20)

[yannisabel]

Same issue here. Is there any workaround?

[santhoshdasari786]

I had forked it and given a fix Not sure if it's been accepted.

…

On Sun, 25 Feb, 2024, 10:26 pm Yann Isabel, ***@***.***> wrote: Same issue here. Is there any workaround? — Reply to this email directly, view it on GitHub <#1065 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHJ22OBYIYKBQRJKCIVJ7DLYVNUL5AVCNFSM6AAAAABCKO2ON2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNRSHE4TQOJRHE> . You are receiving this because you commented.Message ID: ***@***.***>

[mrtnvh]

Hi. I did a dug a little further.

The buildable command breaks at the point it wants to add the buildable configuration options to the stencil.config.ts.

Seems that the nx findNodes cannot find any nodes with ObjectLiteralExpression and therefore node[0] is undefined.

nx-extensions/packages/stencil/src/stencil-core-utils/lib/plugins.ts

Lines 16 to 17 in c3f7394

	const nodes = findNodes(source, ts.SyntaxKind.ObjectLiteralExpression);
	let node = nodes[0];

It however does work when replacing ObjectLiteralExpression with ArrayLiteralExpression, for some strange reason. I guess this is an error in TypeScript, rather than this library.

I've opened the following PR, where I try to re-enable updating the outputTargets rather than ignoring nodes not being found.

#1074

[Jhonnathan-Medina]

I continue to have the same issue even after V18

[pawel-twardziak]

@Jhonnathan-Medina @mrtnvh @yannisabel @santhoshdasari786 @Samg983 @jprivard @lehmamic could you check out the recent version of it?