Stencil: Not compatible with Yarn 2 & Typescript

[fketchakeu]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[X ] bug report
[ ] feature request

Current behavior:

With Yarn (version 2), running the build script (stencil build) causes errors.

E.g.

➤ YN0000: [ ERROR ] TypeError: Cannot destructure property `name` of 'undefined' or
➤ YN0000:      'null'. at getPackageInformation

Expected behavior:
Successful build

Steps to reproduce:

Create a stencil starter project, but use yarn 2 and typescript.
After installing the dependencies try building by running:

yarn run build

Other information:

The error stack trace would looks something like this:

➤ YN0000: [ ERROR ]  TypeError: Cannot destructure property `name` of 'undefined' or
➤ YN0000:            'null'. at getPackageInformation
➤ YN0000:            (/Users/Path/To/Project/.pnp.js:41632:34) at
➤ YN0000:            Object.getPackageInformation
➤ YN0000:            (/Users/Path/To/Project/.pnp.js:41952:20) at
➤ YN0000:            getPnpTypeRoots
➤ YN0000:            (/Users/Path/To/Project/.yarn/cache/typescript-patch-fea84800fa-1.zip/node_modules/typescript/lib/typescript.js:27922:42)
➤ YN0000:            at getDefaultTypeRoots
➤ YN0000:            (/Users/Path/To/Project/.yarn/cache/typescript-patch-fea84800fa-1.zip/node_modules/typescript/lib/typescript.js:27938:24)
➤ YN0000:            at getEffectiveTypeRoots
➤ YN0000:            (/Users/Path/To/Project/.yarn/cache/typescript-patch-fea84800fa-1.zip/node_modules/typescript/lib/typescript.js:27893:20)
➤ YN0000:            at Object.getAutomaticTypeDirectiveNames
➤ YN0000:            (/Users/Path/To/Project/.yarn/cache/typescript-patch-fea84800fa-1.zip/node_modules/typescript/lib/typescript.js:28068:29)
➤ YN0000:            at Object.createProgram
➤ YN0000:            (/Users/Path/To/Project/.yarn/cache/typescript-patch-fea84800fa-1.zip/node_modules/typescript/lib/typescript.js:95251:56)
➤ YN0000:            at Object.transpileModule
➤ YN0000:            (/Users/Path/To/Project/.yarn/cache/typescript-patch-fea84800fa-1.zip/node_modules/typescript/lib/typescript.js:116969:26)
➤ YN0000:            at transformToLazyComponentText
➤ YN0000:            (/Users/Path/To/Project/.yarn/cache/@stencil-core-npm-1.8.6-1c86e2e9d6-1.zip/node_modules/@stencil/core/dist/compiler/index.js:4695:47)
➤ YN0000:            at updateToLazyComponent
➤ YN0000:            (/Users/Path/To/Project/.yarn/cache/@stencil-core-npm-1.8.6-1c86e2e9d6-1.zip/node_modules/@stencil/core/dist/compiler/index.js:4746:24)

[arcanis]

I'm looking into it as this is potentially a bug in Yarn, in which case I'll fix it there and report back.

[arcanis]

The main issue I spotted is that Stencil is passing an empty string ("") to TypeScript for the cwd parameter, and the Yarn codepath doesn't handle that properly. I'll fix that on our side (although you might want to still take a look at it, I'd probably use an explicit process.cwd() instead).

Another issue remains regarding the resolve package, though: since @stencil/core is shipping it bundled, it disables the builtin normalizeOptions pseudo-hook that resolve exposes to resolution runtimes. Yarn thus cannot extend it, causing the resolution to fail.

@adamdbradley I can see two options for the problem described above: either resolve can be marked as "external" (which would likely be my recommended option), or you can implement the resolution extension yourself (which is probably not something you care to maintain). Would you be open to the first?

[adamdbradley]

Something we're taking on is ensuring the stencil compiler can work on any environment, and it doesn't require nodejs. That part is already working in master and the compiler is able to resolve modules on its own without node, and the compiler for both the online repl and nodejs are identical. I prefer bundling the few dependencies that we do have for our use case (but not saying every nodejs project needs to do that, it just works well for us).

When you say yarn cannot extend resolve, how is it trying to extend it? We do create our own options for resolve, but how is yarn trying to extend the same thing? Thanks

[arcanis]

Basically, we replace the pseudo-hook file content when installing it from the registry. We do this by recognizing the name of the package (resolve) and the path we agreed with their maintainers (normalize-options.js). In the case of stencil both the resolve name and the file disappear, so we can't apply this strategy transparently.

[manucorporat]

The stencil team will not work on this issue just yet, i am sorry :(