Stencil: Build fails, (0 , workspace_1.readJsonFile) is not a function

Describe the bug I can not build a Stencil library immediately after creating it. It fails with the following error:

> nx run web-components:build --verbose
(0 , workspace_1.readJsonFile) is not a function
TypeError: (0 , workspace_1.readJsonFile) is not a function
    at copyOrCreatePackageJson (C:\Users\eglove\Projects\ethan-gone\node_modules\.pnpm\@nxext+stencil@13.1.0_c85b6e2e4017c9570146ef9fc4663e52\node_modules\@nxext\stencil\src\executors\stencil-runtime\prepare-config-and-outputarget-paths.js:27:58)
    at prepareDistDirAndPkgJson (C:\Users\eglove\Projects\ethan-gone\node_modules\.pnpm\@nxext+stencil@13.1.0_c85b6e2e4017c9570146ef9fc4663e52\node_modules\@nxext\stencil\src\executors\stencil-runtime\prepare-config-and-outputarget-paths.js:63:5)
    at C:\Users\eglove\Projects\ethan-gone\node_modules\.pnpm\@nxext+stencil@13.1.0_c85b6e2e4017c9570146ef9fc4663e52\node_modules\@nxext\stencil\src\executors\stencil-runtime\prepare-config-and-outputarget-paths.js:67:9
    at Generator.next (<anonymous>)
    at C:\Users\eglove\Projects\ethan-gone\node_modules\.pnpm\tslib@2.3.1\node_modules\tslib\tslib.js:117:75
    at new Promise (<anonymous>)
    at __awaiter (C:\Users\eglove\Projects\ethan-gone\node_modules\.pnpm\tslib@2.3.1\node_modules\tslib\tslib.js:113:16)
    at prepareConfigAndOutputargetPaths (C:\Users\eglove\Projects\ethan-gone\node_modules\.pnpm\@nxext+stencil@13.1.0_c85b6e2e4017c9570146ef9fc4663e52\node_modules\@nxext\stencil\src\executors\stencil-runtime\prepare-config-and-outputarget-paths.js:66:34)
    at C:\Users\eglove\Projects\ethan-gone\node_modules\.pnpm\@nxext+stencil@13.1.0_c85b6e2e4017c9570146ef9fc4663e52\node_modules\@nxext\stencil\src\executors\build\executor.js:37:92
    at Generator.next (<anonymous>)

———————————————————————————————————————————————

>  NX   ERROR  Running target "web-components:build" failed

  Failed tasks:

  - web-components:build

To Reproduce

nx g @nxext/stencil:library web-components

nx g @nxext/stencil:make-lib-buildable --importPath='@companyName/web-components' web-components

Expected behavior

Build files are generated in dist/packages/web-components of Nx repo.

Additional context

@nrwl versions: 13.4.1 @nxext/stencil: 13.1.0 @stencil/core: 2.12.0

This is on a fresh build, no changes to default configs.

[eglove]

@DominikPieper I moved @nrwl/workspace back to 13.3.12 to get past this issue. However, there still seems to be a misconfiguration between Rollup and TypeScript when running the build on the dev server.

Rollup: Parse Error
Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)

@Component({
  shadow: true,

I tried using @rollup/plugin-typescript and adding this to stencil.config.ts

rollupPlugins: {
  before: [typescript()],
},

No luck. Is there another workaround for this?

EDIT: Removing the extension of the NX base tsconfig worked. I’m not sure what the cause here is. But here is a diff for reference.

https://imgur.com/a/J2gCUej

[pranav-js]

@DominikPieper no worries. for now downgraded workspace package only. enjoy ur xmas holidays 😃